如何在不使用 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 組件的 $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 component的對象。

Answer 1

將數據從父組件傳遞到子組件的官方方法是使用props 。 將數據從子組件傳遞到其父組件的官方方法是使用emit 。

在子組件中使用this.$emit('event_name', some_data)並在父組件的模板中捕獲，例如<child-component v-on:event_name="methodName"> 。