基礎

混入 (mixin)提供了一種非常靈活的方式，來分發 Vue 元件中的可複用功能。一個混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被“混合”進入該元件本身的選項。

例子：

1、定義一個混入物件(mixin.js)

  export const myMixin = {
      data() {
          return {
              num: 1
          }
      },
      created() {
          this.hello()
      },
      methods: {
          hello () {
              console.log('hello from mixin')
          }
      }
  }
 

2、把混入物件混入到當前的元件中

  <template>
      <div>
          元件1
      </div>
  </template>

  <script>
  import { myMixin } from '@/mixin.js';
  export default {
      mixins: [myMixin]
  }
  </script>

用法似不似相當簡單呀

mixins的特點

1、引數在各元件中不共享

定義元件 1，並對引數num進行+1的操作

  <template>
    <div>
        元件 1 裡的num值是: {{ num }}
    </div>
</template>
 
  <script>
  import { myMixin } from '@/mixin.js';
  export default {
      mixins: [myMixin],
      created () {
          this.num++
      }
  }
  </script>
 

定義元件 2，引數num 不做操作

  <template>
      <div>
          元件 2 裡的num值是: {{ num }}
      </div>
  </template>
 
  <script>
  import { myMixin } from '@/mixin.js';
  export default {
      mixins: [myMixin]
  }
  </script>

看兩元件中分別輸出的num值

  元件 1 ：num的值是 2
  元件 2 ：num的值 是1

大家可以看到，我在元件1裡改變了num裡面的值，元件2中的num值還是混入物件裡的初始值，由此可以看出：引數在各元件中不共享

2、值為物件的選項，如methods,components等，選項會被合併，鍵衝突的元件會混入物件的

在混入物件(mixin.js) 定義方法 one、two

  export const myMixin = {
      methods: {
          one () {
              console.log('one from mixin');
          },
          two () {
              console.log('two from mixin');
          }
      }
  }

在元件中定義方法 one、two

  <template>
      <div>
          template
      </div>
  </template>
  <script>
  import { myMixin } from '@/mixin.js';
  export default {
      mixins: [myMixin],
      created () {
          this.list()
          this.one()
          this.two()
      },
      methods: {
        list () {
            console.log('list from template');
        },
        two () {
            console.log('two from template');
        }
      }
  }
  </script>

列印臺的輸出：

  list from template
  one from mixin
  two from template

可以看到選項會 被合併，鍵 衝突的 元件 會 覆蓋 混入物件的

3、值為函式的選項，如created, mounted等，就會被合併呼叫，混合物件裡的鉤子函式在元件裡的鉤子函式之前呼叫

在混入物件(mixin.js)定義 console.log()

  export const myMixin = {
      created() {
          console.log('created from mixin');
      },
  }

在元件中定義 console.log()

  <template>
      <div>
          template
      </div>
  </template>
 
  <script>
  import { myMixin } from '@/mixin.js';
  export default {
      mixins: [myMixin],
      created() {
        console.log('created from template');
      }
  }
  </script>

列印臺的輸出：

  created from mixin
  created from template

可以看到 值為 函式 的選項，如created, mounted等，就會 被合併呼叫，混合物件裡的鉤子函式 在元件裡的鉤子函式之 前 呼叫

與vuex的區別

vuex：用來做狀態管理的，裡面定義的變數在每個元件中均可以使用和修改，在任一元件中修改此變數的值之後，其他元件中此變數的值也會隨之修改。
Mixins：可以定義共用的變數，在每個元件中使用，引入元件中之後，各個變數是相互獨立的，值的修改在元件中不會相互影響。

與公共元件的區別

元件：在父元件中引入元件，相當於在父元件中給出一片獨立的空間供子元件使用，然後根據props來傳值，但本質上兩者是相對獨立的。
Mixins：則是在引入元件之後與元件中的物件和方法進行合併，相當於擴充套件了父元件的物件與方法，可以理解為形成了一個新的元件。