vue——自定义创建公共方法或变量、混入（mixins）方法

自定义创建公共方法或变量

官方文档：

Vue.js 的插件应该有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

我的应用：

commonFun.js 里创建方法或变量

export default {
    install(Vue) {
        Vue.prototype.$bus = new Vue({
            data: {
                a: 10
            },
            methods: {
                add() { this.a++ }
            }
        })
        Vue.prototype.$say = function (str) {
            alert(str)
        }
    }
}

main.js 里引入

// 导入自己的公共方法
import commonFun from './commonFuc/commonFuc.js'
Vue.use(commonFun);

随意的组件引用

this.$bus.add()
this.$say(this.$bus.a)

混入（mixins）方法

mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。

Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2