Vuejs中的mixins該怎么使用

本篇文章給大家分享的是有關Vuejs中的mixins該怎么使用，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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

一、Mixins的基本用法

現在有個數字點擊遞增的程序，假設已經完成了，這時我們希望每次數據變化時都能夠在控制臺打印出提示：“數據發生變化”.

代碼實現過程:

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


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

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

當點擊按鈕時會觸發混入的 addLog 中的 updated 方法。

二、mixins的調用順序

• 從執行的先后順序來說，都是 混入的先執行，然后構造器里的再執行

• data中的屬性 和 methods里的方法，會覆蓋（ 構造器覆蓋混入的屬性和方法 ）

• 生命周期的鉤子則會調用2遍，不會覆蓋（ 先調用混入鉤子再調用構造器鉤子 ）

在上邊的代碼的構造器里我們也加入了updated的鉤子函數：

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


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

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

三、全局混入方式

全局混入的執行順序要前于混入和構造器里的方法。

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


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

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

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

順序總結：全局混入 > 局部混入 > 構造器

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

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

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

  <script>
      var addLog = {
          updated: function () {
              console.log("數據放生變化,變化成" + 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>

以上就是Vuejs中的mixins該怎么使用，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。