如何在 Vue.js 上获取导入组件的数据？答案

【问题标题】：How to get imported component's data on Vue.js?如何在 Vue.js 上获取导入组件的数据？
【发布时间】：2019-05-03 16:30:50
【问题描述】：

我在使用名为 vue-tasty-burgers 的 vue 组件进行可切换导航时遇到问题。当使用v-show 导入的组件isActive 的数据为true 时，我想显示我的菜单，但似乎找不到任何获取数据的方法。

我试图包含v-show="isActive"，但它似乎没有从我的isActive burger 组件的数据中获取变量。

这是我到目前为止的地方：

<transition name="fade">
  <div v-show="isActive" class="menu">
    <transition-group name="list" tag="nav">
      <router-link key="home" to="/Home" class="menu-item">
        Home
      </router-link>
      <router-link key="portfolio" to="/Portfolio" class="menu-item">
        Portfolio
      </router-link>
      <router-link key="technology" to="/Technology" class="menu-item">
        Technology
      </router-link>
    </transition-group>
  </div>
</transition>
<div class="hero">
  <div class="header">
    <router-link to="home">
      <div class="brand">
        <img src="../assets/brand.png">
        <div class="tagline">
          Your<br>Little<br>Spaceship
        </div>
      </div>
    </router-link>
    <div class="burger">
      <tasty-burger-button
      type="spin"
      color="#fff"
      activeColor="#fff"/>
    </div>
  </div>
</div>

TL;DR - 如何从导入的 burger 组件的 isActive 数据中获取数据？

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

props 向下传播，事件冒泡

这意味着您无法从组件中获取数据，而是需要监听事件。

这里是documentation

所以你会像这样使用它......

<template>
    <tasty-burger-button 
        :active="isActive" 
        @toggle="setIsActive"
    />
</template>
<script>
export default {
  data () {
    return {
      isActive: false,
    }
  },
  methods:{
    setIsActive(value) {
      this.isActive = value;
    }
  }
}
</script>

【讨论】：