VueJS 父元素與子元素的通信

Question

VueJS 的新手，因此希望就最佳方法獲得一些建議。

我有一個包含多個子組件的父級。

創建子組件后，每個子組件都會附加一個事件處理程序

this.$parent.$on('save', this.save);

因此，每當我在父級中發出以下內容時，我們都會調用子級保存方法

this.$emit('save', block);

我看到的問題是每個孩子都聽這個父母的事件是對這個事件的反應。

有沒有更好的方法讓特定的孩子對父母的點擊事件做出反應？

Answer 1

也許您可以嘗試將帶有 .sync 修飾符的道具傳遞給子組件，然后在子組件中您應該使用計算屬性。 這是一個選項，但我不知道您要實現什么目標，是否有任何特定原因必須發出事件？

閱讀關於 props 的 vue.js 文檔： https ://v2.vuejs.org/v2/guide/components.html#Props

Answer 2

對於您正在嘗試的內容，如果可能的話，我會使用Child Component ref並從父級調用子級的方法：

 Vue.component('my-comp', { template: "#my-comp-template", props: ['name'], methods: { saveMyComp() { console.log('Saved:', this.name); } } }) new Vue({ el: '#app', data: { people: [{name: 'Bob'}, {name: 'Nelson'}, {name: 'Zed'}] }, methods: { saveChild(index) { this.$refs.myComps[index].saveMyComp(); } } });

 <script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script> <div id="app"> <div v-for="(person, index) in people"> <button @click="saveChild(index)">saveMyComp</button> <my-comp :name="person.name" ref="myComps"></my-comp> </div> </div> <template id="my-comp-template"> <span> {{ name }} </span> </template>

請記住，父組件已經與子組件耦合——因為它知道它存在於模板聲明中。