欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中混入mixin的用法介紹

 更新時間：2022年10月17日 11:15:04   作者：愛思考的豬  
混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時，所有混入對象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)

什么是混入？

混入通過注入配置項(xiàng)到vue實(shí)例用來提升復(fù)用性

基礎(chǔ)使用

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

選項(xiàng)合并

選項(xiàng)合并發(fā)生在下面兩種情況

  • mixins接收的是一個數(shù)組,mixin中的屬性沖突時會發(fā)生合并
  • 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');
        },
      },
    });

上述兩種的選項(xiàng)合并規(guī)則是相同的:

  • 周期鉤子沖突的時候,會合并成數(shù)組都保留,執(zhí)行順序是先執(zhí)行minxi的鉤子,再執(zhí)行組件上的鉤子
  • methods、computed這類值為對象的選項(xiàng)在沖突的時候以組件屬性為準(zhǔn)

自定義合并規(guī)則

除了使用上述默認(rèn)的合并規(guī)則,還可以通過Vue.config.optionMergeStrategies自定義合并規(guī)則。

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

通常對于值為對象的屬性我們可以借用已有的合并規(guī)則

	//借用methods的規(guī)則
	Vue.config.optionMergeStrategies.myMixin=Vue.config.optionMergeStrategies.methods;

全局混入

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

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

總結(jié)

  • mixin混入通過注入配置項(xiàng)到vue實(shí)例提升復(fù)用性
  • 屬性沖突時以組件內(nèi)的屬性為準(zhǔn),聲明周期的鉤子會保留多個

到此這篇關(guān)于Vue中混入mixin的用法介紹的文章就介紹到這了,更多相關(guān)Vue mixin內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論