Vue mixin(混合)笔记

作者: 梦之卿知 | 来源:发表于2017-05-18 21:57 被阅读1514次

Vue mixins(混合)

用途

为组件定义可复用的方法,可以在mixin对象里定义组件的任何属性,在组件使用mixin时,mixin中的属性会添加到组件属性中

定义mixin
组件内mixin
<template>
  <div class="mixins">
    <span>{{msg | uppercase}}</span>
  </div>
</template>

<script>
  const myMixin = {
    created(){
      this.hello();
    },
    methods: {
      hello(){
        window.console.log(this.msg)
      }
    }
  };
  export default {
    mixins: [myMixin],
    name: 'mixins',
    data () {
      return {
        msg: 'mixin',

      }
    }
  }
</script>
全局mixin(使用Vue.mixin()方法)
Vue.mixin({
  created(){
    console.log('global mixin')
  }
});

在定义全局mixin之创建的Vue实例都会将mixin对象里的属性添加到实例中

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
});
const Component = Vue.extend({
  template:'<span>121</span>'

});
Vue.mixin({
  created(){
    window.console.log('global mixin')
  }
});
const component=new Component();

这段代码中由于mixin是在App生成之后定义的,只会在创建Component实例的时候才会添加到实例属性中,created执行一次。

全局mixin与组件内mixin冲突
  • case1:

    /*全局mixin*/
    Vue.mixin({
      created(){
        window.console.log('global mixin')
      },
      methods:{
        hello(){
          window.console.log('global:'+this.msg)
        }
      }
    });
    /*组件内mixin*/
    const myMixin = {
        created(){
          this.hello();
        },
        methods: {
        }
      };
    /*执行结果*/
    /*
    global mixin      main.js:16 
    global mixin      main.js:16
    global mixin      main.js:16
    global:mixin      main.js:20 全局mixin中定义的hello方法
    */
    

    每次创建组件时,全局mixin都会添加到组件实例中,如果全局mixin和组件内mixin有同名的钩子函数,钩子函数都会执行,并且先执行先执行全局后执行组件内。

  • case2

    /*全局mixin*/
    Vue.mixin({
      created(){
        this.hello();
      },
      methods:{
        hello(){
          window.console.log('global:'+this.msg)
        }
      }
    });
    /*组件内mixin*/
    const myMixin = {
        created(){
          this.hello();
        },
        methods: {
          hello(){
            window.console.log(this.msg)
          }
        }
      };
    /*执行结果*/
    /*
    global:undefined          main.js:20
    global:undefined      main.js:20 //这是其他组件调用的全局mixin
    mixin             app.8b4a0e8….js:161 //全局中的
    mixin             app.8b4a0e8….js:161 //组件中的
    */
    

    对于非钩子函数,组件实例的对象属性,组件内的会覆盖全局的。

  • case3:组件内定义的optionsmixin冲突

    /*全局mixin:同case2*/
    /*组件内mixin:同case2*/
    /*组件内定义的options*/
    export default {
        mixins: [myMixin],
        name: 'mixins',
        created(){
          window.console.log('inner');
            this.hello();
        },
        data () {
          return {
            msg: 'mixin',
    
          }
        },
        methods:{
            hello(){
              window.console.log('inner:'+this.msg)
            }
        }
      }
    /*执行结果*/
    /*
    global:undefined          main.js:20
    global:undefined          main.js:20
    inner:mixin           app.bd90e4d….js:181 
    inner:mixin           app.bd90e4d….js:181 
    inner             app.bd90e4d….js:169 
    inner:mixin           app.bd90e4d….js:181
    */
    

总结:Vue混合策略

  1. vue 是安装 全局mixin——组件内mixin——组件options的顺序来合并组件实例的options。
  2. 对于钩子函数,会添加到一个函数数组里,执行顺序从前到后
  3. 对于组件的对象属性(methods等),后面的会覆盖前面的
实现全局mixin的钩子函数在指定组件中执行/不执行

​ 在时机使用过程中,如果希望钩子函数中的代码只在指定的组件中执行,可以使用组件自定义options来实现,类似methods等,在定义组件时添加自定义标记:

/*全局mixin*/
Vue.mixin({
  created(){
    if(this.$options['myOptions']){
      console.log('run');
      this.hello();
    }

  }
});
/*组件内添加*/
myOptions:{
        run:true
    }
/*运行结果*/
/*
run             main.js:17
inner:mixin     app.ab88047….js:176 
*/
相关链接

相关文章

网友评论

    本文标题:Vue mixin(混合)笔记

    本文链接:https://www.haomeiwen.com/subject/igrexxtx.html