如何在不使用vuex的情况下将对象从A组件传递到Vue.js中的B组件？

Question

这两个组件是在app.vue中使用vue-router定义的，如下所示：

<div class='app'>
    <div class='nav'>
        <router-link to='/a'>to A component</router-link>
        <router-link to='/b'>to B component</router-link>
    </div>
    <div class='content'>
        <router-view></router-view>
    </div>    
</div>  

我尝试接收一个包含 app.vue 中的对象的事件，该对象是来自 A组件<$ strong>的$ emit，然后我可以从发送该对象app.vue 到 B组件

代码如下：

    //script in A component
    data () {
       toModify (good) {
         console.log(good)  // {'name': 'mike'}
         this.$emit('tomodify', [good])
       }
    }

    <!-- A component -->
    <button class="modifyBtn" @click="toModify(good)">Modify</button>

      //script in app.vue
        methods: {
          sendData (good) {
            this.agood = good
            console.log(this.agood)  // undefined
          }
        }

      <!--app.vue-->
      <div class="view-wrapper">
        <router-view @tomodify="sendData(good)"></router-view>
      </div>

我不知道为什么在 app.vue 我可以获得该活动但没有来自 A组件的对象。

Answer 1

将数据从父组件传递到子组件的官方方法是使用props。将数据从子组件传递到其父组件的官方方法是使用emit。

事件在子组件中以this.$emit('event_name', some_data)发出，并在父组件的模板中捕获，如<child-component v-on:event_name="methodName">。