文章目录
- 一、props配置项
- 二、组件自定义事件
- 三、全局事件总线
- 四、消息订阅与发布
一、props配置项
- 作用:组件间通信
- 传递数据
<Demo name="xxx"/>
- 接收数据
1. 只接收
props:['name']
2. 限制类型
props:{name:string
}
3.限制类型,必要性,指定默认值
props:{name:{type:string, //类型required:true, //必要性default:'老王' //默认值}
}
3.
备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。(因此v-model绑定的值不能是props传过来的值,因为props是不能修改的)
- 拓展:这种方式一般是父传子,要实现子传父,可以在father.vue中定义一个函数,然后通过儿子通过props接收,在适当的时机调用这个函数,将自己的参数传给这个函数,然后父亲就可以接收了。
二、组件自定义事件
- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据
- 使用场景:A是父组件,B是子组件,B想给A传递数据,那么就要在A中给B绑定自定义事件(事件回调在A中)
- 绑定自定义事件
在子组件Demo中,若xxx被触发了,则父组件的test事件就会被调用
1.在父组件中
<Demo @xxx="test"/> 或 <Demo v-on:xxx="test"/>
2.在父组件中
<Demo ref="demo"/>
....
mounted(){this.$refs.组件名.$on(xxx,this.test)
}
3.若想让自定义事件只触发一次,可以使用once修饰符,或$once方法
- 触发自定义事件
this.$emit(xxx,数据)
- 解绑自定义事件
1.this.$off(xxx)
2.this.$off([xxx1,xxx2,xx3])解绑多个
3.this.$off() 解绑全部
- 组件上也可以绑定原生DOM事件,需要使用native修饰符,不然会认为是自定义事件。
<Demo @click.naitve="test"/>
- 注意,通过
this.$refs.组件名.$on(xxx,this.test)
绑定自定义事件时,回调test要么配置在methods中,要么用箭头函数,否则会出现this指向问题。
三、全局事件总线
- 作用:实现任意组件通信
- 安装全局事件总线
//在main.js中
new Vue({...beforeCreate(){Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm}...
})
- 使用全局事件总线
1. 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
methods(){demo(data){...}
}
mounted(){this.$bus.$on('xxx',this.demo)
}
2.提供数据
this.$bus.$emit('xxx',数据)
- 最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。
四、消息订阅与发布
- 作用:实现任意组件通信。
- 使用:利用第三方库,安装pubsub:npm o pubsub-js
- 引入
import pubsub from 'pubsub-js'
- 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。
methods(){demo(data){...}
}
mounted(){this.pid = pubsub.subscribe('xxx',this.demo)//或者this.pid = pubsub.subscribe('xxx',(data)=>{})
}
- 提供数据
pubsub.publish('xxx',数据)
- 最好在beforeDestroy钩子中,用
Pubsub.unsubscribe(pid)
去取消订阅