详解Vue.js组件可复用性的混合(mixin)方式和自定义指令

var tpl1={  template:'#stpl1',  data:function(){    return {msg:false}  },  methods:{    msgf:function(){      this.msg=!this.msg    }  }}var tpl2={  template:'#stpl2',  data:function(){    return {msg:false}  },  methods:{    show:function(){      this.msg=true    },    hide:function(){      this.msg=false    }  }}new Vue({  el:'#box',  components:{    tpla:tpl1,    tplb:tpl2,  }})

// 首先,定义一个混合对象var mymixin = {  data:function(){    return {msg:false}  },  methods:{    show:function(){      this.msg=true    },    hide:function(){      this.msg=false    },    msgf:function(){      this.msg=!this.msg    }  }}var tpl1={  template:'#stpl1',  minins:[mymixin]}var tpl2={  template:'#stpl2',  minins:[mymixin]}// 如果我们需要在第一个组件定义data为true时,我们可以直接在组件内定义,他会覆盖mixin的datavar tpl1={  template:'#stpl1',  minins:[mymixin],  data:function(){    msg:true  }}

// 注册一个全局自定义指令 v-focusVue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) {  // 聚焦元素  el.focus() }})

directives: { focus: {  // 指令的定义--- }}

<input v-focus>