Vue中混入mixin的用法介紹

Posted on by

什麼是混入？

混入通過註入配置項到vue實例用來提升復用性

基礎使用

    const myMixin = {
      created: function () {
        this.hello();
      },
      methods: {
        hello: function () {
          console.log('hello from mixin');
        },
      },
    };
    var vm = new Vue({
      el: '#app',
      mixins: [myMixin],
    });

選項合並

選項合並發生在下面兩種情況

  • mixins接收的是一個數組,mixin中的屬性沖突時會發生合並
  • mixin屬性和組件原有屬性沖突時
    const myMixin = {
      created: function () {
        this.hello();
      },
      methods: {
        hello: function () {
          console.log('hello from mixin');
        },
      },
    };
    var vm = new Vue({
      el: '#app',
      mixins: [myMixin],
      created: function () {
        this.hello();
      },
      methods: {
        hello: function () {
          console.log('hello from vue instance');
        },
      },
    });

上述兩種的選項合並規則是相同的:

  • 周期鉤子沖突的時候,會合並成數組都保留,執行順序是先執行minxi的鉤子,再執行組件上的鉤子
  • methods、computed這類值為對象的選項在沖突的時候以組件屬性為準

自定義合並規則

除瞭使用上述默認的合並規則,還可以通過Vue.config.optionMergeStrategies自定義合並規則。

	Vue.config.optionMergeStrategies.myMixin=(toVal, fromVal){
	//返回合並的值
	};

通常對於值為對象的屬性我們可以借用已有的合並規則

	//借用methods的規則
	Vue.config.optionMergeStrategies.myMixin=Vue.config.optionMergeStrategies.methods;

全局混入

混入也可以全局註冊,使用時候要格外小心,它會影響到每一個組件/實例

    Vue.mixin({
      created: function () {
        console.log('mixin created');
      },
    });
    var vm1 = new Vue(...);
    var vm2 = new Vue(...);

總結

  • mixin混入通過註入配置項到vue實例提升復用性
  • 屬性沖突時以組件內的屬性為準,聲明周期的鉤子會保留多個

到此這篇關於Vue中混入mixin的用法介紹的文章就介紹到這瞭,更多相關Vue mixin內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：

    None Found