props
props实现父传子
在父组件中
<son sondata="通过props给孩子传值"></son>
在子组件中
props:['sondata','getprops'],
props实现子传父
父组件
传递一个函数给子组件
<son :getprops="getprops"></son>
...
methods: {
getprops(a){
console.log(a);
}
},
其中函数接收的值就是子组件传回的数据
子组件
调用这个函数
this.getprops('要传递的值')
使用自定义事件调用函数
自定义事件子组件给父组件传值
方法1 使用v-on
在父组件中定义自定义事件
<son @get="getsonData"></son>
...
methods: {
getsonData(data){
console.log(data);
},
},
其中getsonData接收的参数是子组件传递回来的参数
在子组件中使用$emit传递给子组件
this.$emit('get','要传递的值')
方法2 使用ref
父组件中
<son ref="getdata"></son>
mounted() {
this.$refs.getdata.$on('get',this.getsonData)
},
子组件
this.$emit('get','要传递的值')
全局事件总线
可以实现任意组件之间的通信
安装事件总线
在main.js里面安装
new Vue({
render: (h) => h(App),
beforeCreate() {
Vue.prototype.$bus = this;
},
}).$mount("#app");
使用事件总线实现传值
接收数据的组件中
在组件中给$bus绑定自定义事件,事件的回调留在A组件自身。
this.$bus.$on('bordata',(data)=>{
console.log(data);
})
回调函数的参数就是接收值
在发送组件中
在组件中给$bus绑定自定义事件,事件的回调留在A组件自身。
this.$bus.$emit('bordata',数据)
消息订阅与发布(pubsub)
也是实现任意组件之间的通信
安装和引入pubsub
npm i pubsub-js
import pubsub from 'pubsub-js'
提供数据
pubsub.publish(‘xxx’,数据)
接收数据
this.pid = pubsub.subscribe(‘xxx’,function(消息名,接受的数据)) //订阅消息
总结
父传子 :props 事件总线 消息订阅与发布
子传父 : props 组件自定义事件 事件总线 消息订阅与发布
兄弟之间传递: 事件总线 消息订阅与发布