Vue.js之mixins混合組件詳解

更新時間：2021年09月14日 09:24:56 作者：貓老板的豆

這篇文章主要介紹了Vue.js之mixins混合組件詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

混合以一種靈活的方式為組件提供分布復(fù)用功能。混合對象可以包含任意的組件選項。當(dāng)組件使用了混合對象時，混合對象的所有選項將被“混入”組件自己的選項中。

一、Mixins的基本用法

現(xiàn)在有個數(shù)字點擊遞增的程序，假設(shè)已經(jīng)完成了，這時我們希望每次數(shù)據(jù)變化時都能夠在控制臺打印出提示：“數(shù)據(jù)發(fā)生變化”.

代碼實現(xiàn)過程:

<div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">增加數(shù)量</button></P>
</div>


<script>
    var addLog = {
    	// 將updated鉤子混入到vue實例中
        updated() {
            console.log("數(shù)據(jù)放生變化,變化成" + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        mixins: [addLog], //混入
    })
</script>

這里寫圖片描述

當(dāng)點擊按鈕時會觸發(fā)混入的 addLog 中的 updated 方法。

二、mixins的調(diào)用順序

從執(zhí)行的先后順序來說，都是 混入的先執(zhí)行，然后構(gòu)造器里的再執(zhí)行
data中的屬性和 methods里的方法，會覆蓋（ 構(gòu)造器覆蓋混入的屬性和方法 ）
生命周期的鉤子則會調(diào)用2遍，不會覆蓋（ 先調(diào)用混入鉤子再調(diào)用構(gòu)造器鉤子 ）

在上邊的代碼的構(gòu)造器里我們也加入了updated的鉤子函數(shù)：

<div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">增加數(shù)量</button></P>
</div>


<script>
    var addLog = {
        updated : function () {
            console.log("數(shù)據(jù)放生變化,變化成" + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        updated: function () {
            console.log("構(gòu)造器里的updated方法。")
        },
        mixins: [addLog], //混入
    })
</script>

這里寫圖片描述

三、全局混入方式

全局混入的執(zhí)行順序要前于混入和構(gòu)造器里的方法。

<div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">增加數(shù)量</button></P>
</div>


<script>
    Vue.mixin({
        updated: function () {
            console.log('我是全局被混入的');
        }
    })

    var addLog = {
        updated : function () {
            console.log("數(shù)據(jù)放生變化,變化成" + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        updated: function () {
            console.log("構(gòu)造器里的updated方法。")
        },
        mixins: [addLog], //混入
    })
</script>

這里寫圖片描述

順序總結(jié)：全局混入 > 局部混入 > 構(gòu)造器

兩個對象鍵名沖突時，取組件對象的鍵值對

當(dāng)混入和組件對象中都有test方法（重名）時，最終的值取組件對象的鍵值對

  <div id="app">
      <p>num:{{ num }}</p>
      <P>
          <button @click="add">增加數(shù)量</button>
      </P>
  </div>

  <script>
      var addLog = {
          updated: function () {
              console.log("數(shù)據(jù)放生變化,變化成" + this.num + ".");
              this.test();
          },
          methods: {
              test: function () {
                  console.log('混入中的test')
              }
          }
      }

      var app = new Vue({
          el: '#app',
          data: {
              num: 1
          },
          methods: {
              add: function () {
                  this.num++;
              },
              test:function(){
                  console.log('組件對象中的test')
              }
          },
          mixins: [addLog], //混入
      })
</script>

這里寫圖片描述