天津重型网站建设风格,网站建设多久可以学会,网站开发雷小天,wordpress添加分享按钮1.组件的自定义事件
2.全局事件总线
3.消息订阅与发布
一.组件的自定义事件
1.1 绑定自定义事件
① 自定义事件就是一种组件间通信方式#xff0c;用于子组件和父组件之间传递数据
② props来实现子组件给父组件传递数据
#xff08;1#xff09;先给父组件中绑定一个…1.组件的自定义事件
2.全局事件总线
3.消息订阅与发布
一.组件的自定义事件
1.1 绑定自定义事件
① 自定义事件就是一种组件间通信方式用于子组件和父组件之间传递数据
② props来实现子组件给父组件传递数据
1先给父组件中绑定一个函数 2子组件中用props接收 3在子组件中调用这个方法 ③ 绑定一个自定义事件 第一种写法
1事件绑定(在父组件中绑定)
Student v-on:atguigugetStudentName / 第二种写法更加灵活
1使用ref的方式
Student refstudent /
④ 触发事件(在子组件中触发)
this.$emit(atguigu, this.name, 1, 2, 3)
⑤ 自定义事件只想触发一次
第一种方式写法
Student atguigu.oncegetStudentName /
第二种方式写法
this.$refs.student.$once(atguigu, this.getStudentName)
1.2 解绑自定义事件
① 解绑一个自定义事件
this.$off(atguigu)
② 解绑多个自定义事件
this.$off([atguigu, demo])
③ 解绑所有的自定义事件
this.$off()
1.3 注意事项
① 通过 this.$ref.xxx.on(atguigu, 回调)绑定自定义事件时回调要么配置在 methods 中要么用箭头函数否则 this 的指向会出问题因为这个回调函数中的this指向的是触发这个事件的组件并不是接收这个事件的组件
② 组件上也可以绑定原生DOM事件需要使用native修饰符
Student refstudent click.nativeshow /
二. 全局事件总线
① 组件间通信的一种方式适用于任意组件间通信
② 安装全局事件总线
new Vue({
beforeCreate(){
Vue.prototype.$bus this
},
})
③ 事件总线接收数据 ④ 事件总线解绑 ⑤ 分发事件 三. 消息订阅与发布
① 消息订阅与发布是组件间通信的方式适用于任意组件间通信
② 需要引入一个消息订阅与发布的第三方实现库PubSubJS
下载 npm install -S pubsub-js
引入 import pubsub from pubsub-js
③ 过程订阅消息(对应绑定事件监听) 发布消息分发事件取消消息订阅解绑事件监听
代码示例
1订阅消息 msg是消息名data是数据 2发布消息 3取消订阅最好在beforeDestroy钩子中取消订阅
