Vue mixin 混入及自定义Vue插件

一、mixin混入

mixin即合并公共方法： 可以设置通用的方法或者变量
外部mixin 如下：
全局mixin：Vue.mixin = ({})

export const m1 = {
  data(){
      return {
          nickname: '张三' // data的变量会被单页里定义的给覆盖
      }
  },
  mounted(){
      console.log('123') // 但是mounted是不会覆盖的，这里会执行
  },
  methods: {
    sayHello() {
        console.log('hello')
    }
  }
}

new Vue({
  el: '#app',
  mixins: [m1],
  data() {
    return {
        nickname: '李四', // 若在本vue中也定义了同名变量，则这个值会覆盖mixins定义的
        age: 20
    }
  }，
  mounted(){
      console.log('456') // 但是mounted是不会覆盖的，这里也会执行
      this.sayHello();
  }
})

{{nickname}}-{{age}}若在单页里不定义nickname也能拿到nickname，因为minxins混入了原先已经定义好的

二、Vue 自定义插件

  var my_plugin = {
      install (Vue, options) { // 这个必须
        // 混入
        Vue.mixin({
          data(){
            return {
                nickname: '张三' // data的变量会被单页里定义的给覆盖
            }
          },
          mounted(){
            console.log('123') // 但是mounted是不会覆盖的，这里会执行
          },
          methods: {
            sayHello() {
              console.log('hello')
            }
          }
        })

        // 自定义组件
        Vue.component("sb",{
          template: "<h1>simba组件</h1>"
        })

        // 自定义指令
        Vue.directive("focus", {
          inserted(el) {
            el.focus()
          }
        })

        // 扩展属性
        Vue.prototype.$log = console.log

        if (options && options.debug){
          
        }
      }
    }

插件写好后 使用Vue.use(my_plugin) 安装下即可使用
在vue文件中调用

<sb/> // 使用组件

<input type="text" v-focus> // 使用指令

$log('111'); // 使用属性

同上还能使用混入的方法

若这么写

Vue.use(my_plugin，{ debug: true})

那么上面的插件代码options就能取到值debug： true

作者：Do_Du
链接：https://www.jianshu.com/p/dac7d15ed8d3
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。