Question

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

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

这是我到目前为止的去处：

<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 -如何从导入的汉堡组件的isActive数据中获取数据？

Answer 1

道具传播向下，事件冒泡

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

这是documentation

所以您将使用类似这样的方式...

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

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

1 个答案: