Vue混入（mixins）理解及應用

這是我參與8月更文挑戰的第11天，活動詳情查看：8月更文挑戰

1. mixins 簡介

混合 (mixins) 是一種分發 Vue 組件中可複用功能的很是靈活的方式。

混合對象能夠包含任意組件選項。

當組件使用混合對象時，全部混合對象的選項將被混入該組件自己的選項。

1.1 mixins 理解

組件在引用以後至關於在父組件內開闢了一塊單獨的空間，來根據父組件props過來的值進行相應的操做，單本質上二者仍是涇渭分明，相對獨立。

而 mixins 則是在引入組件以後，則是將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合併。至關於在引入後，父組件的各類屬性方法都被擴充了。

• 單純組件引用：

父組件 + 子組件 ---> 父組件 + 子組件

• mixins

父組件 + 子組件 ---> new父組件

有點像註冊了一個 vue 的公共方法，能夠綁定在多個組件或者多個Vue對象實例中使用。 另外一點，相似於在原型對象中註冊方法，實例對象即組件或者Vue實例對象中，仍然能夠定義相同函數名的方法進行覆蓋，有點像子類和父類的感受。

2. mixins 使用

1. 定義一個混入對象

const testMixin = {
  data(){
    return{
      count:1,
    }
  },
  methods: {
    test(){
      console.log('mixin')
    }
  },
  beforeMount() {
    this.test()
  },
}

export{
  testMixin
}
複製代碼

2. 把混入對象混入到當前的組件中

<template>
  <div class="template1"> 組件一 </div>
</template>

<script> import { testMixin } from '@/mixins/mixin.js' export default { data() { return {}; }, mixins:[testMixin], methods: {}, mounted() {}, }; </script>
複製代碼

3. 效果

3. mixins 的特色

3.1 方法和參數在各組件中不共享

混合對象中的參數count

const testMixin = {
  data(){
    return{
      count:1,
    }
  },
  methods: {
    test(){
      console.log('mixin')
    }
  },
  beforeMount() {
    this.test()
  },
}

export{
  testMixin
}
複製代碼

組件1中的參數 count 進行+1的操做

<template>
  <div class="template1"> template1中的count:{{count}} </div>
</template>

<script> import { testMixin } from '@/mixins/mixin.js' export default { data() { return {}; }, mixins:[testMixin], methods: {}, mounted() { this.count ++; }, }; </script>

<style lang="stylus" scoped> .template1{ color : red; } </style>
複製代碼

組件2中的參數 count 未進行操做

<template>
  <div class="template2"> template2中的count:{{count}} </div>
</template>

<script> import { testMixin } from '@/mixins/mixin.js' export default { data() { return {}; }, mixins:[testMixin], methods: {}, mounted() {}, }; </script>

<style lang="stylus" scoped> .template2{ color : blue; } </style>
複製代碼

看兩組件中分別輸出的 count 值

能夠看到，在組件1裏改變了 count 裏面的值，組件2中的 count 值仍是混入對象裏的初始值

3.2 值爲對象的選項(如methods,components等)，選項會被合併(鍵衝突的, 組件會覆蓋混入對象的)

混入對象中的方法

const testMixin = {
  data(){
    return{
      count:1,
    }
  },
  methods: {
    test1(){
      console.log('test1 from mixin')
    },
    test2(){
      console.log('test2 from mixin')
    }
  },
  beforeMount() {
  },
}

export{
  testMixin
}
複製代碼

組件中的方法

<template>
  <div class="template1"> template1中的count:{{count}} </div>
</template>

<script> import { testMixin } from '@/mixins/mixin.js' export default { data() { return { count:10 }; }, mixins:[testMixin], methods: { testSelf(){ console.log('testSelf from template1') }, test2(){ console.log('test2 from template1') } }, mounted() { this.testSelf(); this.test1(); this.test2(); }, }; </script>
複製代碼

打印臺輸出

3.3 值爲函數的選項(如created,mounted等)，會被合併調用。混合對象裏的鉤子函數會在組件裏的鉤子函數以前調用

混入對象函數中的 console

const testMixin = {
  data(){
    return{
      count:1,
    }
  },
  methods: {},
  mounted() {
    console.log('mixin')
  },
}

export{
  testMixin
}
複製代碼

組件函數中的 console

<template>
  <div class="template1"> template1中的count:{{count}} </div>
</template>

<script> import { testMixin } from '@/mixins/mixin.js' export default { data() { return { }; }, mixins:[testMixin], methods: {}, mounted() { console.log('template1') }, }; </script>
複製代碼

打印臺輸出

3.3 mixin中含有異步請求

當混合裏面包含異步請求函數，而咱們又須要在組件中使用異步請求函數的返回值時，咱們會取不到此返回值，以下：

// mixin.js
const testMixin = {
  data(){
    return{}
  },
  methods: {
    remote(){
      new Promise((resolve,reject) => {
        let a = 1;
        setTimeout(()=>{
          resolve(a)
        },1000)
      }).then(res =>{
        console.log(res,'mixin');
        return res
      })
    }
  },
  mounted() {},
}

export{
  testMixin
}
複製代碼

// test.vue
<template>
  <div class="template1"> template1 </div>
</template>

<script> import { testMixin } from '@/mixins/mixin.js' export default { data() { return {}; }, mixins:[testMixin], methods: {}, mounted() { console.log(this.remote(),'template1') }, }; </script>
複製代碼

解決方案：不要返回結果而是直接返回異步函數

// mixin.js
const testMixin = {
  data(){
    return{}
  },
  methods: {
    async remote(){
      let result = await new Promise((resolve,reject) => {
        let a = 1;
        setTimeout(()=>{
          resolve(a)
        },1000)
      })
      return result;
    }
  },
  mounted() {},
}

export{
  testMixin
}
複製代碼

// test.vue
<template>
  <div class="template1"> template1 </div>
</template>

<script> import { testMixin } from '@/mixins/mixin.js' export default { data() { return {}; }, mixins:[testMixin], methods: {}, mounted() { this.remote().then(res =>{ console.log(res,'template1') }) }, }; </script>
複製代碼

4. 總結

與vuex的區別：

• vuex：用來狀態管理的，裏面定義的變量在每一個組件中都可以使用和修改，在任一組件中修改此變量的值以後，其餘組件中此變量的值也會隨之修改；
• Mixins：能夠定義共用的變量，在每一個組件中使用，引入組件中以後，各個變量是相互獨立的，值的修改在組件中不會相互影響；

與公共組件的區別

• 公共組件：在父組件中引入組件，至關於在父組件中給出一片獨立的空間供子組件使用，而後根據props來傳值，但本質上二者是相對獨立的；
• Mixins：在引入組件以後與組件中的對象和方法進行合併，至關於擴展了父組件的對象與方法，能夠理解爲造成了一個新的組件；