父子組件共用mixins的注意點(diǎn)

• 父子組件正常引用（通過(guò)props傳值）：父子組件之間的關(guān)系是相互獨(dú)立的
• 父子組件共用一個(gè)mixins：(在同一個(gè)作用域內(nèi)，直接使用)

在開(kāi)發(fā)過(guò)程中，會(huì)遇到tableData直接渲染的情況，數(shù)據(jù)量過(guò)大，則會(huì)拆分多個(gè)子組件，此時(shí)第一次進(jìn)入頁(yè)面，調(diào)用api，后端傳參tableData，需要對(duì)數(shù)據(jù)進(jìn)行組裝修改，我發(fā)現(xiàn)控制臺(tái)打印能出現(xiàn)，頁(yè)面卻不渲染的情況，經(jīng)驗(yàn)證發(fā)現(xiàn)el-table中每次只能監(jiān)聽(tīng)整個(gè)row的變化，row中某個(gè)屬性變化時(shí)，是無(wú)法追中的，要么this.$set（tableData,index,row）強(qiáng)行設(shè)置，index是row在tableData的索引，要么就正常組裝tableData，然后通過(guò)props傳給子組件，注意不能同名，否則子組件也引入mixins，這邊作用域會(huì)有沖突，其實(shí)出現(xiàn)這個(gè)問(wèn)題還是對(duì)mixins的引入順序以及內(nèi)部原理不太清晰。

mixins-beforeCreate——father-beforeCreate——mixins-created——father-created——mixins-beforeMount——father-beforeMount——son-beforeCreate——son-created——son-beforeMount——son-mounted——mixins-mounted——father-mounted

mixins中的import data components watch computed methods 等等都是對(duì)組件的拓展，相當(dāng)于組件中沒(méi)有的話(huà)，mixins中有，組件中可以直接調(diào)用，當(dāng)mixins中的定義的變量與組件中的同名發(fā)生沖突時(shí)，以組件中為準(zhǔn)。 

詳解mixins混入使用

當(dāng)我們的項(xiàng)目越來(lái)越大，我們會(huì)發(fā)現(xiàn)組件之間可能存在很多相似的功能，你在一遍又一遍的復(fù)制粘貼相同的代碼段（data，method，watch、mounted等），如果我們?cè)诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對(duì)這種情況官方提供了Mixins特性

什么是Mixins？

mixins（混入），官方的描述是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式，mixins是一個(gè)js對(duì)象，它可以包含我們組件中script項(xiàng)中的任意功能選項(xiàng)，如data、components、methods 、created、computed等等。

我們只要將共用的功能以對(duì)象的方式傳入 mixins選項(xiàng)中，當(dāng)組件使用 mixins對(duì)象時(shí)所有mixins對(duì)象的選項(xiàng)都將被混入該組件本身的選項(xiàng)中來(lái)，這樣就可以提高代碼的重用性，使你的代碼保持干凈和易于維護(hù)。

什么時(shí)候使用Mixins？

當(dāng)我們存在多個(gè)組件中的數(shù)據(jù)或者功能很相近時(shí)，我們就可以利用mixins將公共部分提取出來(lái)，通過(guò) mixins封裝的函數(shù)，組件調(diào)用他們是不會(huì)改變函數(shù)作用域外部的。

如何創(chuàng)建Mixins？

在src目錄下創(chuàng)建一個(gè)mixins文件夾，文件夾下新建一個(gè)myMixins.js文件。

前面我們說(shuō)了mixins是一個(gè)js對(duì)象，所以應(yīng)該以對(duì)象的形式來(lái)定義myMixins，在對(duì)象中我們可以和vue組件一樣來(lái)定義我們的data、components、methods 、created、computed等屬性，并通過(guò)export導(dǎo)出該對(duì)象

如何使用Mixins？

在需要調(diào)用的組件中引入myMixins.js文件，然后在export default 中引入你需要的對(duì)象即可

Mixins的特點(diǎn)

【5.1】方法和參數(shù)在各組件中不共享，雖然組件調(diào)用了mixins并將其屬性合并到自身組件中來(lái)了，但是其屬性只會(huì)被當(dāng)前組件所識(shí)別并不會(huì)被共享，也就是其他組件無(wú)法從當(dāng)前組件中獲取到mixins中的數(shù)據(jù)和方法。

①首先我們?cè)诨旌蠈?duì)象myMixins.js中定義一個(gè)age字段和getAge方法

 
export const myMixins = {
  components:{},
  data() {
    return {
      age: 18,
    }
  },
  mounted() {
    this.getAge()
  },
  methods: {
    getAge() {
      console.log(this.age)
    }
  }

② 組件1中對(duì)num進(jìn)行+1操作

 
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    this.age++
  },
}

③組件2不進(jìn)行操作

 
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
}

④我們分別切換到兩個(gè)頁(yè)面，查看控制臺(tái)輸出。會(huì)發(fā)現(xiàn)組件1改變了age里面的值，組件2中age值還是混合對(duì)象的初始值，并沒(méi)有隨著組件1的增加而改變

【5.2】引入mixins后組件會(huì)對(duì)其進(jìn)行合并，將mixins中的數(shù)據(jù)和方法拓展到當(dāng)前組件中來(lái)，在合并的過(guò)程中會(huì)出現(xiàn)沖突，接下來(lái)我們?cè)敿?xì)了解Mixins合并沖突

Mixins合并沖突

【6.1】值為對(duì)象(components、methods 、computed、data)的選項(xiàng)，混入組件時(shí)選項(xiàng)會(huì)被合并，鍵沖突時(shí)優(yōu)先組件，組件中的鍵會(huì)覆蓋混入對(duì)象的

①我們?cè)诨烊雽?duì)象增加age屬性、getAge1方法和getAge2方法

 
// myMixins.js
export const myMixins = {
  components:{},
  data() {
    return {
      age: 18,
    }
  },
  methods: {
    getAge1() {
      console.log("age1 from mixins =", this.age )
    },
    getAge2() {
      console.log("age2 from mixins =", this.age )
    },
  }
}

②我們?cè)谝肓薽yMixins文件的組件中，增加age屬性、getAge1方法和getAge3方法

// template.vue
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {
      age: 20,
    }
  },
  mounted() {
    this.getAge1();
    this.getAge2();
    this.getAge3();
  },
  methods: {
    getAge1() {
      console.log('age1 from template =', this.age)
    },
    getAge3() {
      console.log('age3 from template =', this.age)
    },
  }
}

③我們會(huì)發(fā)現(xiàn)，組件中的age覆蓋了混合對(duì)象的age，組件的getAge1方法覆蓋了混合對(duì)象的getAge1方法

【6.2】值為函數(shù)(created、mounted)的選項(xiàng)，混入組件時(shí)選項(xiàng)會(huì)被合并調(diào)用，混合對(duì)象里的鉤子函數(shù)在組件里的鉤子函數(shù)之前調(diào)用

 
// myMixins.js
export const myMixins = {
  components:{},
  data() {
    return {}
  },
  created() {
    console.log('xxx from mixins')
  }
}

 
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    console.log('xxx from template')
  }
}

與vuex的區(qū)別

• vuex：用來(lái)做狀態(tài)管理的，里面定義的變量在每個(gè)組件中均可以使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會(huì)隨之修改。
• Mixins：可以定義共用的變量，在每個(gè)組件中使用，引入組件中之后，各個(gè)變量是相互獨(dú)立的，值的修改在組件中不會(huì)相互影響。

與公共組件的區(qū)別

• 組件：在父組件中引入組件，相當(dāng)于在父組件中給出一片獨(dú)立的空間供子組件使用，然后根據(jù)props來(lái)傳值，但本質(zhì)上兩者是相對(duì)獨(dú)立的。
• Mixins：則是在引入組件之后與組件中的對(duì)象和方法進(jìn)行合并，相當(dāng)于擴(kuò)展了父組件的對(duì)象與方法，可以理解為形成了一個(gè)新的組件。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論