Vuejs第十篇之vuejs父子组件通信

console.log("childrenClick-Parent");
},
parentClick: function () {
console.log("parentClick-Parent");
return true;
}
},
components: {
children1: { //这个无返回值，不会继续派发
props: ['test'],
template: "<button>children1</button></br>子组件2：<children2></children2>",
events: {
childrenClick: function () {
console.log("childrenClick-children1");
},
parentClick: function (msg) {
console.log("parentClick-Children1");
console.log("message:" + msg);
}
},
components: {
children2: {
props: ['test'],
template: "<button @click='findParent'>children-Click</button>",
methods: {
findParent: function () {
this.$dispatch('childrenClick');
}
},
events: {
childrenClick: function () {
console.log("childrenClick-children2");
},
parentClick: function (msg) {
console.log("parentClick-Children2");
console.log("message:" + msg);
}
}
}
}
},
anotherChildren1: { //这个是返回值为true，会继续向子组件的子组件派发
props: ['test'],
template: "<button>anotherChildren1</button></br>另一个子组件2：<another-children2></another-children2>",
events: {
childrenClick: function () {
console.log("childrenClick-anotherChildren1");
return true;
},
parentClick: function (msg) {
console.log("parentClick-anotherChildren1");
console.log("message:" + msg);
return true;
}
},
components: {
anotherChildren2: {
props: ['test'],
template: "<button @click='findParent'>anotherChildren2-Click</button>",
methods: {
findParent: function () {
this.$dispatch('childrenClick');
}
},
events: {
childrenClick: function () {
console.log("childrenClick-anotherChildren2");
},
parentClick: function (msg) {
console.log("parentClick-anotherChildren2");
console.log("message:" + msg);
}
}
}
}
}

}
});
</script>
},
parentClick: function () {
console.log("parentClick-anotherChildren2");
}
}
}
}
}

}
});
</script>

说明：

【1】点击父组件的按钮，会向下广播，然后触发子组件1本身，另外一个子组件1，以及另一个子组件2；

【2】点击子组件2的按钮，会触发子组件2的事件和子组件1的事件，但不会触发父组件的按钮；

【3】点击另一个子组件2的按钮，会触发另一个子组件2的事件，另一个子组件1的事件和父组件的事件（因为另一个子组件1的事件的返回值为true）；

③使用v-on绑定自定义事件：

【1】简单来说，子组件触发某个事件（events里的方法）时，父组件也会执行某个方法（父组件methods里的方法）。