javascript - 在 Vue.js 中，如何在不使用 vuex 的情况下将对象从 A 组件传递到 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 组件 的 $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中我可以获取事件，但没有来自组件的对象。

Answer 1

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

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