一、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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。