Mixin的混合机制及install全局组件

• vue install - 插件的运用
  应用一下 Vue 中插件的制作方法。封装的插件需要一个 install 的方法将插件装载到 Vue 上。
  创建插件之后，就可以 Vue.use(myPlugin) 来使用了。

vue.use()源码

function initUse (Vue) {
  Vue.use = function (plugin) {
    var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    var args = toArray(arguments, 1);
    args.unshift(this);
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args);
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args);
    }
    installedPlugins.push(plugin);
    return this
  };
}

看！在最后调用了 plugin.install 的方法，我们要做的就是处理好这个 install 函数即可~

创建一个 myPlugin.js 文件，这个就是我们编写的插件

import {mapGetters, mapMutations, mapActions} from 'vuex'
import {merge, empty, isJsonStr} from './utils'
export default {
  install(Vue, options) {
    // 1. 添加全局方法或属性，如:  vue-custom-element
    Vue.myGlobalMethod = function () {
      // 逻辑...
    };
    // 2. 可以添加全局资源：指令/过滤器/过渡等，如 vue-touch
    Vue.directive('touch', {
      bind: function () {
      },
      // 当绑定元素插入到 DOM 中。
      inserted: function (el, binding, vnode, oldVnode) {
        // 聚焦元素
        el.focus();
      },
      update: function () {
      },
      componentUpdated: function () {
      },
      unbind: function () {
      }
    });
    // 3. 注入组件
    Vue.mixin({
      methods: { 
        empty(v) {
          return empty(v)
        },
        ...mapMutations(['setTest']),
        ...mapActions(['alert', 'confirm'])
      },
      filter: {},
      computed: {
        ...mapGetters(['test'])
      },
      watch: {},
    });
    // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现逻辑...
    Vue.prototype.$config = function (options) {
      return {
        Login: 'login'
      }
    }
  }
}

• vue mixin

A、单独文件的使用

1. 定义mixin.js文件

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

2.在vue中运用mixin

import mixin from '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin]
}

B、在两个不同组件的使用

let mixin={
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            console.log('hello from mixin!----'+this.msg++)
        }
    }
}
var child=Vue.component('child',{ 
        template:`
child component
`, 
        mixins:[mixin]
})
Vue.component('kid',{ 
        template:`
kid component
`, 
        mixins:[mixin]
})

• 两个组件用可以通过this.msg引用mixins中定义的msg，但是，小编尝试过，两个组件引用的并不是同一个msg，而是各自创建了一个新的msg。如果在组件中定义相同的data，则此处会引用组件中的msg，而非mixins中的。

• 如果在引用mixins的同时，在组件中重复定义相同的方法，则mixins中的方法会被覆盖。

• mixin的合并策略

当混合对象与组件包含同名选项时，这些选项将以适当的策略合并。例如，同名钩子函数被并入一个数组，因而都会被调用。另外，混合的钩子将在组件自己的钩子之前调用。

let mixin={
    mounted(){
        console.log('mixin say hi')//先输出
    },
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            console.log('mixin foo()'+this.msg++)
        }
    }
}
let vm=new Vue({
    el:"#app",
    data:{
        msg: 2
    },
    mounted: function(){
        console.log('app say hi')//后输出
    },
    methods:{
        foo(){
            console.log('Parent foo()'+this.msg)
        }
    }
})

值为对象的选项，如 methods, components 和 directives 将合并到同一个对象内。如果键冲突则组件的选项优先。

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}
var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})
vm.foo() // -> "foo"
vm.bar() // -> "bar"
vm.conflicting() // -> "from self"