Vue入門教程14-混入

一、混入的使用

混入 (mixin) 主要是用來分發 Vue 組件中的可複用功能。混入對象可以包含任意組件選項，當一個組件使用混入對象時，所有混入對象的選項將被加入進該組件本身的選項。
Demo：

<template>
  <div id="app">
  </div>
</template>
<script>

  import Vue from "vue";
  export default {
    name: 'app',
    data(){
      return{
      }
    },
    methods:{
    }
  }
  var mixinDemo = {
    created:function () {
      this.startmixin()
    } ,
    methods: {
      startmixin:function () {
        document.write('這個是混入內容！')
      }
    }
  };
  var Component = Vue.extend({
    mixins:[mixinDemo]
  })
  var component = new Component();
</script>
<style>
  body {
    text-align: center;margin-top: 60px;
  }
</style>

二、選項合併

1、同名選項合併：

當組件和混入對象含有同名選項時，這些選項將會進行混合，當在和組件的數據發生衝突時以組件數據優先。以下實例中，Vue 實例與混入對象包含了相同的方法 created ，輸出結果進行了合併：

  var mixinDemo = {
    created:function () {
      document.write('這個是混入內容B！'+'<br>')
    }
  }
  new Vue({
    mixins: [mixinDemo],
    created: function () {
      document.write('這個是混入內容A！' + '<br>')
    }
  });

2、同名函數名合併：

如果 methods 選項中有相同的函數名稱，則 Vue 實例優先顯示，參考如下程序：

  var mixinDemo = {
    methods:{
      methodA:function () {
        document.write('method A-------'+'<br>');
      },
      methodB:function () {
        document.write('method B-------'+'<br>');
      }
    }

  }
  var vm = new Vue({
    mixins: [mixinDemo],
    methods:{
      methodC:function () {
        document.write('method C+++++++'+'<br>');
      },
      methodB:function () {
        document.write('method B+++++++'+'<br>');
      }
    }
  });
  vm.methodA();
  vm.methodC();
  vm.methodB();

運行結果：

二、全局混入

註冊全局混入對象，使用恰當時，可以爲自定義對象注入處理邏輯。但是使用全局混入對象，將會影響到所有之後創建的 Vue 實例，建議謹慎使用：

  Vue.mixin({
    created: function () {
      var demoOpt = this.$options.demoOpt;
      if(demoOpt){
        document.write(demoOpt)
      }
    }
  })
  new Vue({
    demoOpt: 'Hello World!'
  })

END.