Vuejs第十篇之vuejs父子组件通信
本篇文章是小编结合官方文档整理的一套更加细致，代码更多更全的教程，非常不错，比较适合新手阅读。
本篇资料来于官方文档：
http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1
父子组件通信
①访问子组件、父组件、根组件；
this.$parent访问父组件
this.$children访问子组件（是一个数组）
this.$root根实例的后代访问根实例
示例代码：
<divid="app">
父组件：
<inputv-model="val"><br/>
子组件：
<test:test="val"></test>
</div>
<script>
varvm=newVue({
el:'#app',
data:{
val:1
},
components:{
test:{
props:['test'],
template:"<input@keyup='findParent'v-model='test'/>",
methods:{
findParent:function(){
console.log(this.$parent);//访问根组件
console.log(this.$parent.val);//访问根组件的val属性
console.log(this.$parent.$children.indexOf(this));//查看当前能否在其父组件的子组件中找到索引
console.log(this.$parent===this.$root);//查看父组件和根组件是不是全等的（因为他的父组件就是根组件）
}
}
}
}
});
</script>
当在子组件的输入框按键弹起时，显示内容依次为：
父组件、父组件的输入框的值（默认情况是1）、0（表示是父组件的children属性中的第一个元素）、true（由于父组件就是根组件，所以是全等的）；
通过这样的方法，可以在组件树中进行互动。
②自定义事件：
首先，事件需要放置在events属性之中，而不是放置在methods属性中（新手很容易犯的错误），只能触发events属性中的事件，而methods属性中的事件是无法触发的。
其次，向上派发和向下广播有所区别：向上派发会触发自身同名事件，而向下广播不会；
第三，向上派发和向下广播默认只会触发直系（子或者父，不包括祖先和孙）的事件，除非事件返回值为true，才会继续在这一条线上继续。
第四，事件不能显式的通过this.事件名来调用它。
示例代码：
<divid="app">
父组件：
<button@click="parentClick">点击向下传播broadcast</button>
<br/>
子组件1：
<children1></children1>
<br/>
另一个子组件1：
<another-children1></another-children1>
</div>
<script>
varvm=newVue({
el:'#app',
data:{
val:1
},
methods:{
parentClick:function(){
this.$broadcast("parentClick","abc");
}
},
events:{
childrenClick:function(){
console.log("childrenClick-Parent");
},
parentClick:function(){
console.log("parentClick-Parent");
returntrue;
}
},
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");
returntrue;
},
parentClick:function(msg){
console.log("parentClick-anotherChildren1");
console.log("message:"+msg);
returntrue;
}
},
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里的方法）。
【2】触发的绑定写在模板之中（即被替换的那个template模板中），可以多个子组件的事件绑定一个父组件的方法，或者不同子组件的事情绑定不同父组件的方法，但是不能同一个子组件事件绑定多个父组件的方法。
【3】子组件派发消息传递的参数，即使子组件的事件没有参数，也不影响将参数传递给父组件的方法（即父组件的方法可以接受到子组件方法获取的参数）
如示例：
<divid="app">
父组件：
<button>点击向下传播broadcast</button>
<br/>
子组件1：
<!--绑定写在这里，可以多个绑定同一个，或者不同绑定不同的，但不能一个绑定多个-->
<childrenv-on:test="parent"@test2="another"></children>
</div>
<script>
varvm=newVue({
el:'#app',
data:{
val:1
},
methods:{
parent:function(arg){
console.log(arg);
console.log("thefirstmethodwithtestevent");
},
another:function(){
console.log("anothermethod");
}
},
components:{
children:{//这个无返回值，不会继续派发
props:['test'],
template:"<button@click='childClick'>children1</button></br><button@click='childClick2'>children1</button>",
methods:{
childClick:function(){
this.$emit("test",'theargumentfordispatch');
},
childClick2:function(){
this.$emit("test2");
}
},
events:{
test:function(){
console.log("test");
},
test2:function(){
console.log("test2");
}
}
}
}
});
</script>
④子组件索引
简单来说：就是可以直接从索引获取到子组件，然后就可以调用各个子组件的方法了。
添加索引方法是：在标签里添加v-ref:索引名
调用组件方法是：vm.$ref.索引名
也可以直接在父组件中使用this.$ref.索引名
这个时候，就可以获得组件了，然后通过组件可以调用他的方法，或者是使用其数据。
示例代码：
<divid="app">
父组件：
<button@click="todo">触发子组件的事件</button>
<br/>
子组件1：
<!--绑定写在这里，可以多个绑定同一个，或者不同绑定不同的，但不能一个绑定多个-->
<childrenv-ref:child></children>
</div>
<script>
varvm=newVue({
el:'#app',
methods:{
todo:function(){
this.$refs.child.fromParent();//通过索引调用子组件的fromParent方法
}
},
components:{
children:{//这个无返回值，不会继续派发
props:['test'],
template:"<button>children1</button>",
methods:{
fromParent:function(){
console.log("happenedfromParentbyref");
}
}
}
}
});
</script>
以上所述是小编给大家介绍的Vuejs第十篇之vuejs父子组件通信，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！