Vue如何使用混合Mixins和插件开发详解

// 这是在main.js根文件中使用,在组中使用也是一样
import Vue from 'vue';
var mixin = {
  data() {
    return {
      name: 'www.vipbic.com',
      author: '羊先生'
    }
  },
  created: function() {
    console.log('Website：' + this.name)
  },
  methods: {
    foo: function() {
      console.log('作者：' + this.author)
    },
    conflicting: function() {
      console.log('from mixin')
    }
  }
}

new Vue({
  mixins: [mixin],
  render: h => h(App),
  created() {
    let option = this.$options.doNotInit
    console.log('option：', );
    this.foo()
  }
}).$mount('#app')

// 在组建中使用
<template><div></div></template>
<script>
var mixin = {
  data() {
    return {
      name: 'www.vipbic.com',
      author: '羊先生'
    }
  },
  created: function() {
    console.log('Website：' + this.name)
  },
  methods: {
    foo: function() {
      console.log('作者：' + this.author)
    }
  }
}
export default {
  mixins: [mixin],
  created(){
    this.foo()
  }
}
</script>

import Vue from 'vue';
var mixin = {
  data() {
    return {
      name: 'www.vipbic.com',
      author: '羊先生'
    }
  },
  created: function() {
    console.log('Website：' + this.name)
  },
  methods: {
    foo: function() {
      console.log('作者：' + this.author)
    }
  }
}

Vue.mixin(mixin)
new Vue({
  render: h => h(App)
}).$mount('#app')

var mixin = {
  data() {
    return {
      name: 'www.vipbic.com',
      author: '羊先生'
    }
  },
  created: function() {
    let option = this.$options.doNotInit;
    console.log(option) // 第一次执行 true 第二次为 undefined
    if (!option) {
    // 可以放置一些你的逻辑，比如一开始就要调用的方法
      console.log('Website：' + this.name)
    }
  },
  methods: {
    foo: function() {
      console.log('作者：' + this.author)
    },
  }
}

Vue.mixin(mixin);
new Vue({
  doNotInit: true, // 添加一个状态
  render: h => h(App),
}).$mount('#app')

// main.js
import Vue from 'vue';
var mixin = {
  data() {
    return {
      name: 'www.vipbic.com',
      author: '羊先生'
    }
  },
  created: function() {
    let option = this.$options.doNotInit;
    if (!option) {
      console.log('Website：' + this.name)
    }
  },
  methods: {
    foo: function() {
      console.log('作者：' + this.author)
    },
  }
}

Vue.mixin(mixin);
new Vue({
  doNotInit: true,
  render: h => h(App),
}).$mount('#app')

// 在组件中调用
<script>
export default {
  created(){
    this.foo()
  },
}
</script>

import Vue from 'vue';
var mixin = {
  data() {
    return {
      name: 'www.vipbic.com',
      author: '羊先生'
    }
  },
  created: function() {
    let option = this.$options.doNotInit;
    if (!option) {
      console.log('Website：' + this.name)
    }
  },
  methods: {
    foo: function() {
      console.log('作者：' + this.author)
    },
    conflicting: function() {
      console.log('from mixin')
    }
  }
}
export default {
  install(Vue) {
    Vue.mixin(mixin)
  }
}

// 在main.js通过use注册
Vue.use(myMixin);
new Vue({
  doNotInit: true,
  render: h => h(App),
}).$mount('#app')

// 在组件中调用
<script>
export default {
  created(){
    this.foo()
  },
}
</script>

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

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

 // 3. 注入组件,也就上面提到的混入,vue非常灵活就看你如何去挖掘它
 Vue.mixin({
  created: function () {
   // 逻辑...
  }
 })
}

import Vue from 'vue';
//根据install函数规定，第一个传入Vue的实例，第二个参数是一个可选的选项对象，也就是可以传递参数
MyPlugin.install = function(Vue, options) {
  console.log(options) // 打印参数
  Vue.prototype.myName = options.name
  Vue.prototype.myAuthor = function() {
    return options.author
  }
}
Vue.use(MyPlugin, {
  name: 'www.vipbic.com' // 传递参数
  author: '羊先生'
});

new Vue({
  render: h => h(App),
}).$mount('#app')

<script>
export default {
  created(){
    console.log(this.myName)
    console.log(this.myAuthor())
  },
}
</script>

// 通过vue指令的方式添加 指令可以全局添加还可以在组件中添加
import Vue from 'vue';
let MyPlugin = {}
MyPlugin.install = function(Vue, options) {
  Vue.directive("hello", {
    bind: function(el, bingind, vnode) {
      console.log(options)
      el.style["color"] = bingind.value;
      console.log("1-bind");
    },
    inserted: function() {
      console.log("2-insert");
    },
    update: function() {
      console.log("3-update");
    },
    componentUpdated: function() {
      console.log('4 - componentUpdated');
    },
    unbind: function() {
      console.log('5 - unbind');
    }
  })
}
// 传递参数
Vue.use(MyPlugin, {
  name: 'www.vipbic.com',
  author: '羊先生'
});
new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div>
  <span v-hello="color3">{{message}}</span>
    <button @click="add"> 点击开始加1</button>
    <button @click="jiebang">解绑</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      message:10,
      color3:"red"
    }
  },
  methods:{
    add(){
      this.message++;
    },
    jiebang(){
      this.$destroy(); // 解绑 
    }
  },
}
</script>
<style lang="less" scoped>

</style>

let MyPlugin = {}
MyPlugin.install = function(Vue, options) {
  Vue.mixin({
    data() {
      return {
        name: options.name
      }
    },
    methods: {
      getUser() {
        return options.author
      }
    }
  })
}
Vue.use(MyPlugin, {
  name: 'www.vipbic.com',
  author: '羊先生'
})
new Vue({
  render: h => h(App),
}).$mount('#app')

export default {
  data(){
    return {
       
    }
  },
  created(){
   //这里name和getUser来自全局注入的
    console.log(this.name)
    console.log(this.getUser())
  }
}