Vue父子组件间通信(数据传递)
2020-07-16 本文已影响0人
Spinach
父---props--->子
子---props/自定义事件/全局事件总线/消息订阅与发布--->父
任意组件间通信:/自定义事件/全局事件总线/消息订阅与发布/Vuex/路由传参
一、父传子
数据传递
父组件传递:在使用子组件时,使用v-bind:自定义接收名称="要传递的数据"
子组件接收:props:["自定义接收名称"]
方法传递
父组件传递:v-on:自定义接收名称="要传递的方法"
子组件接收时自定义一个方法,在方法中触发父组件传递的方法:this.$emit("自定义接收名称")
二、子传父
数据传递
在父组件向子组件传递方法的基础上,给方法增加参数,
也就是在子组件中触发父组件的方法时:this.$emit("自定义接收名称",需传递的数据),父组件中的方法也增加参数接收数据即可。
父组件调用子组件中的方法
在父组件中使用子组件时,增加ref属性并指定ref的名称,然后在调用方法的地方使用this.refs.ref的名称.需调用的子组件方法名()即可调用。
e.g.
//父组件中
//<子组件 ref='ref的名称></子组件>
<son ref='refName'></son>
//子组件中
methods:{
sonFn(){
alert('子组件中的方法')
}
}
//父组件中
methods:{
faFn(){
//正常调用faFn()方法即可
this.refs.refName.sonFn()
}
}