快捷導(dǎo)航

Vue.js之mixins混合組件詳解

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

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

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

一、Mixins的基本用法

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

代碼實(shí)現(xiàn)過(guò)程:

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


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

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

這里寫(xiě)圖片描述

當(dāng)點(diǎn)擊按鈕時(shí)會(huì)觸發(fā)混入的 addLog 中的 updated 方法。

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

從執(zhí)行的先后順序來(lái)說(shuō)，都是 混入的先執(zhí)行，然后構(gòu)造器里的再執(zhí)行
data中的屬性和 methods里的方法，會(huì)覆蓋（ 構(gòu)造器覆蓋混入的屬性和方法 ）
生命周期的鉤子則會(huì)調(diào)用2遍，不會(huì)覆蓋（ 先調(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>

這里寫(xiě)圖片描述

三、全局混入方式

全局混入的執(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>

這里寫(xiě)圖片描述

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

兩個(gè)對(duì)象鍵名沖突時(shí)，取組件對(duì)象的鍵值對(duì)

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

  <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('組件對(duì)象中的test')
              }
          },
          mixins: [addLog], //混入
      })
</script>

這里寫(xiě)圖片描述