vue中mixins的詳細使用方法和注意點

基礎

混入 (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');
        },
        one () {
              console.log('one 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：則是在引入組件之后與組件中的對象和方法進行合并，相當于擴展了父組件的對象與方法，可以理解為形成了一個新的組件。