Vue2 - 23-03-28

First Post:

Last Update:

Vue2 - 23-03-28

回顾昨日

回调函数在谁身上，谁就可以收到数据；子给父传数据的两种方式：props传函数、在父中给子绑定自定义事件，回调函数为父组件。而绑定自定义事件有两种方式：ref+$refs.xx.$on(事件名称,箭头函数/this.methods里的函数)

事件总线

事件总线能实现兄弟组件之间的通信
关于能实现事件总线特性的分析，视频里面讲的很绕，反正到最后结论就是往构建的Vue实例对象上，向Vue原型追加一个属性，值为Vue实例本身（视频里面演示了实际上追加一个组件实例也能实现同样的效果，但是步骤繁琐不推荐）
有点向在Java里的被追加的（虽然Java实现不了），但是多少能够帮助像我这样的后端理解吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public class Vue{
    private Object object;
    //Vue vm;//这就是追加后的样子，Java实现不了
    Vue(Object object){this.object = object;}
    public static void extends(Object object){
        reutrn new VueComponent(object);
    }
}

class VueComponent{
    private Object object;
    VueComponent(Object object){this.object = object;}
}
Vue vm = new Vue(...);
vm.prototype.$bus=vm;//追加的过程，Java实现不了

事件总线实现方式

在main.js（创建vm的入口）中创建vue实例的时候，调用生命周期钩子beforeCreate，通过Vue.prototype的方式往Vue原型追加实例vm自身

1
2
3
new Vue({
    Vue.prototype.$bus = this
})

事件总线的使用

事件总线可以通过组件实例.$bus.$on('事件名',回调方法)进行定义，在通过组件实例.$emit('事件名',数据)进行触发，建议在定义事件的地方消亡之前调用组件实例.$off('事件名')进行销毁

pubsub.js

订阅发布库：pub——publish，sub——subscribe
使用方式：分别在发布端跟接收端引入，然后在发布端作为触发方法体中可供使用的函数：pubsub.publish('订阅名称',数据)；
在订阅端（一般在mounted）使用pubsub.subscribe('订阅名称',回调函数)，其中回调函数第一个参数为订阅名称，第二个参数为数据

≡