一.父组件传值给子组件
1.props
子组件<Child>:
props:["name"]
父组件<Father>:
<Child name="小张"></Child>
2.$parent
子组件接收:
this.$parent.msg //这个msg是父组件的msg
3.依赖注入(provide,inject)
通过父组件提供给后代组件曝露的属性和方法
父组件:
data(){
return{
name:"父亲的名字"
}
},
provide:function(){
return {
getName: this.name
}
}
子组件接收:
inject:["getName"]
二.子组件传值给父组件
1.$emit
自定义事件
子组件<child>:
this.$emit("increment","我是子组件") //increment: 随便自定义的事件名称 第二个参数是传值的数据
父组件<Father>:
<Child @increment="f1"></Child>
methods:{
f1(data){
console.log(data) //打印"我是子组件"
}
}
2.$refs
子组件 <Child>:
data(){
return {
name:"我是子组件"
}
}
父组件 <Father>:
<Child ref="child_id">
methods:{
this.$refs.child_id.name //这个name是子组件的name
}
3.终极方法
使用状态管理工具,例如Vuex
· 兄弟通信: Bus;Vuex
· 跨级通信: Bus;Vuex;provide / inject;attrs/listeners
————————————————
版权声明:本文为CSDN博主「英特纳雄耐尔先生」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/sinat_19594515/article/details/100664033