Vue 2子组件通过$emit向父组件传值失败求助

嘿，你的代码逻辑其实没大问题，核心bug是父组件没给发射事件的子组件绑定监听！

你看App.vue里，你给<scene>组件加了@navigate="navigateTo"事件监听，但实际触发navigate事件的是<buttons>组件啊！父组件根本没监听Buttons的事件，自然收不到传过来的值。

两步搞定问题： #

1. 给Buttons组件添加事件监听
   修改App.vue里的Buttons标签，补上事件绑定：

<buttons @navigate="navigateTo"></buttons>

2. 初始化selectedScene变量
   你在navigateTo方法里给this.selectedScene赋值，但这个变量没在data里声明，Vue会报错。需要在App.vue的data里初始化它：

data() {
  return {
    selectedScene: ''
  }
}

修改后的完整App.vue代码： #

<template>
  <div id="app" class="container">
    <scene @navigate="navigateTo"></scene>
    <buttons @navigate="navigateTo"></buttons>
  </div>
</template>
<script>
import Scene from "./components/Scene.vue";
import Buttons from "./components/Buttons.vue";
export default {
  name: "app",
  data() {
    return {
      selectedScene: ''
    }
  },
  methods: {
    navigateTo(dest) {
      console.log('received value', dest);
      this.selectedScene = dest;
    }
  },
  components: {
    Scene, Buttons
  }
};
</script>
<style scoped>
</style>

现在再点击Buttons里的按钮，父组件的navigateTo方法就能接收到dest值，控制台也会正常打印received value了～

内容的提问来源于stack exchange，提问作者jarrodwhitley