位置: IT常識(shí) - 正文
【Vue】Vue中mixins的使用方法及實(shí)際項(xiàng)目應(yīng)用詳解(vue.mixin是什么)
編輯：rootadmin推薦整理分享【Vue】Vue中mixins的使用方法及實(shí)際項(xiàng)目應(yīng)用詳解(vue.mixin是什么)，希望有所幫助，僅作參考，歡迎閱讀內(nèi)容。
文章相關(guān)熱門搜索詞:vue里面mixins,vue里面mixins,vue.mixin的使用場(chǎng)景和原理,vue mixs,vue中的mixins,vuejs mixins,vue中的mixin,vue mixs,內(nèi)容如對(duì)您有幫助，希望把文章鏈接給更多的朋友！
官網(wǎng)解釋（Vue2.x）：
混入（mixin）提供了一種非常靈活的方式，來分發(fā)Vue組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。
如何理解mixins？我們可以將mixins理解成一個(gè)數(shù)組，數(shù)組中有單或多個(gè)mixin，mixin的本質(zhì)就是一個(gè)JS對(duì)象，它可以有data、created、methods等等vue實(shí)例中擁有的所有屬性，甚至可以在mixins中再次嵌套mixins。
（2）mixin特點(diǎn)1.選項(xiàng)合并官網(wǎng)解釋（Vue2.x）
當(dāng)組件和混入對(duì)象含有同名選項(xiàng)時(shí)，這些選項(xiàng)將以恰當(dāng)?shù)姆绞竭M(jìn)行‘合并’。 比如，數(shù)據(jù)對(duì)象在內(nèi)部會(huì)進(jìn)行遞歸合并，并在發(fā)生沖突時(shí)以組件數(shù)據(jù)優(yōu)先。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>學(xué)習(xí)mixins的簡(jiǎn)單使用</title> <script type="text/javascript" src="../js/vue.js"></script></head><body> <div class="my-app">{{message}}</div> <script type="text/javascript"> const myMixin = { data() { return { message: 'this is mixin message' } }, created() { console.log('mixin created') } } new Vue({ el: ".my-app", mixins: [myMixin], data() { return { message: '簡(jiǎn)單的vue' } }, created() { console.log(this.message) } }) </script></body></html>界面： mixins與Vue instance合并時(shí)，會(huì)將created等鉤子函數(shù)合并成數(shù)組，mixins的鉤子優(yōu)先調(diào)用，當(dāng)data、methods對(duì)象健值沖突時(shí)，以組件優(yōu)先。
同名鉤子函數(shù)將合并為一個(gè)數(shù)組，因此都將被調(diào)用。另外，混入對(duì)象的鉤子將在組件自身鉤子之前調(diào)用。
值為對(duì)象的選項(xiàng)，例如 methods、components 和 directives，將被合并為同一個(gè)對(duì)象。兩個(gè)對(duì)象鍵名沖突時(shí)，取組件對(duì)象的鍵值對(duì)。
2.方法和參數(shù)在各組件中不共享
簡(jiǎn)述：對(duì)于一個(gè)混合對(duì)象而言，如果在不同的組件中（以組件1和組件2為例）使用數(shù)據(jù)，如果組件1對(duì)mixin中的值改變，不會(huì)影響組件2中引用的mixin的data。 例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>學(xué)習(xí)mixins的簡(jiǎn)單使用（1）</title> <script type="text/javascript" src="../js/vue.js"></script></head><body> <div class="my-app">{{message}}</div> <div class="my-app1">{{message}}</div> <script type="text/javascript"> const myMixin = { data() { return { message: 'this is mixin message', age: '18', } }, created() { console.log('mixin created') } } new Vue({ el: ".my-app", mixins: [myMixin], data() { return { message: '簡(jiǎn)單的vue' } }, created() { this.age++; console.log('第一次引用mixin——————' + this.age)//19 } }) new Vue({ el: ".my-app1", mixins: [myMixin], data() { return { message: '簡(jiǎn)單的vue' } }, created() { console.log(this.message) console.log('第二次引用mixin——————' + this.age)//18 } }) </script></body></html>（3）mixin與vuex的區(qū)別vuex： 狀態(tài)管理 里面定義的變量在每個(gè)組件中均可以進(jìn)行使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會(huì)隨之改變。
mixins: 可以定義共用的變量 在每個(gè)組件中使用，引入組件之后，各個(gè)變量是相互獨(dú)立的，值的修改在組件中不會(huì)相互影響
（4）mixin與公共組件的區(qū)別組件 ：在父組件中引入組件，相當(dāng)于在父組件中給出獨(dú)立的一片空間來供子組件使用，父子組件中根據(jù)props和$emit來互相傳值，實(shí)際上兩者是相互獨(dú)立的
mixins:在引入組件之后與組件中的對(duì)象與方法進(jìn)行合并，相當(dāng)于擴(kuò)展了父組件中的對(duì)象和方法，形成了一個(gè)新的組件。
（5）項(xiàng)目實(shí)踐在vue項(xiàng)目中使用element-ui時(shí)，比如在使用Table表格的時(shí)候，免不了申明tableData、total、pageSize等一些Table表格、Pagination分頁需要的參數(shù)。
可以將重復(fù)的data和methods寫入一個(gè)tableMixin中。
export default { data() { return { total: 0, pageNo: 1, pageSize: 10, tableData: [], loading: false } }, created() { this.searchData() }, methods: { // 預(yù)申明，防止報(bào)錯(cuò) searchData() {}, handleSizeChange(size) { this.pageSize = size this.searchData() }, handleCurrentChange(page) { this.pageNo = page this.searchData() }, handleSearchData() { this.pageNo = 1 this.searchData() } }}當(dāng)需要的時(shí)候直接引入即可
import tableMixin from './tableMixin'export default { ...//引入mixins mixins: [tableMixin], methods: { searchData() { ... } }}我們?cè)诮M件內(nèi)會(huì)重新申明serchData方法，類似這種methods對(duì)象形式的key，如果key相同，組件內(nèi)的key會(huì)覆蓋tableMixin中的key。 當(dāng)然我們還可以在mixins嵌套mixins。
（6）總結(jié)注意一下 vue 中 mixins 的優(yōu)先級(jí)，component > mixins > extends。
我們暫且將 mixins 稱作是組件模塊化，靈活運(yùn)用組件模塊化，可以將組件內(nèi)的重復(fù)代碼提取出來，實(shí)現(xiàn)代碼復(fù)用，也使我們的代碼更加清晰，效率也大大提高。
下一篇：Win11磁盤分區(qū)后怎么恢復(fù)到分區(qū)前?Win11磁盤分區(qū)后在恢復(fù)的方法(win11磁盤分區(qū)后不顯示)
