Vue组件通信的几种方式
1、最简单的父子组件传值
1、父传子
<father>
<son :子组件props数组或对象中的名字="data">//这里的:只用于将data识别为js表达式
</son>
</father>
data:{
name:lisi;
age:12;
}
<div>
<h5>{{data.name}}</h5> //子组件中使用props对应的名字接收并使用
</div>
props:['data']
2、子传父
主要的方法为:儿子通过this.$emit(‘父组件中的方法’,子组件中的数据)方法区触发父组件在子组件上自定义的事件,进而根据事件绑定一个处理函数,父组件中的方法会收到子组件中使用emit传递过去的参数。
父组件中:
<father>
<son @子组件emit中指定的事件名="父组件处理方法"> </son>
</father>
method:{
父组件处理方法(子组件传递过来的参数){
}
}
子组件:
<div>
<input type="button" @Click="sendData"> //触发发送方法
</div>
data(){
return:{
data:{
name:lisi;
age:12
}
}
}
method:{
sendData(){
this.$emit('父组件中自定义的事件',this.data.data);
}
}
2、使用privider和inject
3、使用插槽slot
4、使用v-bind=“$attr”
https://blog.csdn.net/simple5960/article/details/117664852
5、使用bus共享
6、使用vuex
总结
其中2、4都是可以跨越很多层的