Vue重要知识

Event Bus 总线

Vue中的EventBus是一种发布订阅模式的实践，适用于跨组件简单通信。

Vuex也可以用来组件中进行通信，更适用于多组件高频率通信。

使用方式：

1.把Bus注入到Vue根对象中，在子组件中可以通过this.$root.Bus.$on()，this.$rooot.Bus.$emit()来调用

import Vue from 'vue'
const Bus = new Vue()
​
var app= new Vue({
    el:'#app',
　　 data:{
　　　　Bus
    }　　
})

2.挂载EventBus到vue.prototype

// bus.js
import Bus from 'vue';
let install = function (Vue) {
    ... ...
    // 设置eventBus
    Vue.prototype.bus = new Bus();
    ... ...
}
​
export default {install};
​
// main.js
import Vue from 'vue';
import bus from './bus';
... ...
​
Vue.use(bus);
​
... ...

注意事项

1. 事件订阅($on)必须在事件广播($emit)前注册；

2. 取消事件订阅($off)必须跟事件订阅($on)成对出现。

3. 注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况

参考资料：https://www.cnblogs.com/fanlinqiang/p/7756566.html

mxin混入

mixin就是采用一定规则将一个功能（组件）的属性混合到另一个组件或者全局当中，优点就是灵活度高，耦合度低，便于维护和复用。

选项合并（混入和组件数据有冲突的时候，都以组件数据优先）

1.当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归 合并，并在发生冲突时以组件数据优先。

2.同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

3.值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突 时，取组件对象的键值对。

注意：Vue.extend() 也使用同样的策略进行合并。

全局混入

全局混入会被注册到每个单一组件上，它会影响每个单独创建的 Vue 实例 。

所以，在Vue官网也有如下提示：请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组 件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用 混入。

prototype原型

在Vue中，可以通过把方法添加到 Vue.prototype 上，来实现添加 Vue 实例方法。添加完成以后，就可以在实例对象中直接通过this.$方法名()的方式调用。

而其中的原理就是利用JS函数的构造函数的特性，在Vue原型上添加属性/方法，在Vue实例上就可以进行读取/调用。

extends继承

允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。

extend是产生一个继承自Vue类的子类，只会影响这个子类的实例对象，不会对Vue类本身以及Vue类的实例对象产生影响。

var CompA = { ... }
​
方法1
var CompB = {
  extends: CompA,
  ...
}
方法2
const ChildrenVue = Vue.extend(CompA，)

依赖注入

provide 选项允许我们指定我们想要提供给后代组件的数据/方法。

inject 选项来接收指定的我们想要添加在这个实例上的属性

// 在一个组件上设置注入的属性，可以是对象，也可以是函数返回一个对象
provide: {
    parentProvide: {
      msg: 'hello world'
    }
},
// 在其任意层级的子节点可以获取到父节点注入的属性
inject: [
    'parentProvide'
]

依赖注入的属性是无法修改的，如果需要在后代组件中监听注入的属性变化，需要在祖先组件中的注入属性为this, 即把祖先属性作为注入属性往下传递。

// 注意这里注入时使用的是函数返回的对象
provide () {
    return {
      parentProvide: this
    }
},
// 接收注入的属性并可以直接修改，修改后祖先的这个属性值也会变化（不推荐在Vue后代组件中修改祖先的属性，因为这样会导致其他后代中的属性值改变)
inject: [
    'parentProvide'
  ],
methods: {
    updataParentMsg () {
      this.parentProvide.msg = '重置了'
    }
},

依赖注入很好的解决了在跨层级组件直接的通信问题，在封装高级组件的时候会很常用。