溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Vue中mixins的使用方法及實(shí)際項(xiàng)目應(yīng)用是什么的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue中mixins的使用方法及實(shí)際項(xiàng)目應(yīng)用是什么文章都會(huì)有所收獲，下面我們一起來看看吧。
官網(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。
官網(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的簡單使用</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: '簡單的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ì)。
簡述：對(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的簡單使用（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: '簡單的vue'
}
},
created() {
this.age++;
console.log('第一次引用mixin——————' + this.age)//19
}
})
new Vue({
el: ".my-app1",
mixins: [myMixin],
data() {
return {
message: '簡單的vue'
}
},
created() {
console.log(this.message)
console.log('第二次引用mixin——————' + this.age)//18
}
})
</script>
</body>
</html>
vuex：
狀態(tài)管理
里面定義的變量在每個(gè)組件中均可以進(jìn)行使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會(huì)隨之改變。
mixins:
可以定義共用的變量
在每個(gè)組件中使用，引入組件之后，各個(gè)變量是相互獨(dú)立的，值的修改在組件中不會(huì)相互影響
組件 ：在父組件中引入組件，相當(dāng)于在父組件中給出獨(dú)立的一片空間來供子組件使用，父子組件中根據(jù)props和$emit來互相傳值，實(shí)際上兩者是相互獨(dú)立的
mixins:在引入組件之后與組件中的對(duì)象與方法進(jìn)行合并，相當(dāng)于擴(kuò)展了父組件中的對(duì)象和方法，形成了一個(gè)新的組件。
在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。
注意一下 vue 中 mixins 的優(yōu)先級(jí)，component > mixins > extends。
我們暫且將 mixins 稱作是組件模塊化，靈活運(yùn)用組件模塊化，可以將組件內(nèi)的重復(fù)代碼提取出來，實(shí)現(xiàn)代碼復(fù)用，也使我們的代碼更加清晰，效率也大大提高。
組件在引用之后相當(dāng)于在父組件內(nèi)開辟了一塊單獨(dú)的空間，來根據(jù)父組件props過來的值進(jìn)行相應(yīng)的操作，單本質(zhì)上兩者還是涇渭分明，相對(duì)獨(dú)立。
而mixins則是在引入組件之后，則是將組件內(nèi)部的內(nèi)容如data等方法、method等屬性與父組件相應(yīng)內(nèi)容進(jìn)行合并。相當(dāng)于在引入后，父組件的各種屬性方法都被擴(kuò)充了。
mixins的一些特性
mixins中的生命周期會(huì)與引入mixins的組件的生命周期整合在一起調(diào)用
值為對(duì)象的選項(xiàng), 組件的data、methods、filters會(huì)覆蓋mixins里的同名data、methods、filters
如methods,components等，選項(xiàng)會(huì)被合并，鍵沖突的組件會(huì)覆蓋混入對(duì)象的，比如混入對(duì)象里有個(gè)方法A，組件里也有方法A，這時(shí)候在組件里調(diào)用的話，執(zhí)行的是組件里的A方法
值為函數(shù)的選項(xiàng)，不同mixin里的同名方法，按照引進(jìn)的順序，最后的覆蓋前面的同名方法
如created,mounted等，就會(huì)被合并調(diào)用，混合對(duì)象里的鉤子函數(shù)在組件里的鉤子函數(shù)之前調(diào)用，同一個(gè)鉤子函數(shù)里，會(huì)先執(zhí)行混入對(duì)象的東西，再執(zhí)行本組件的
方法和參數(shù)在各組件中不共享
如混入對(duì)象中有一個(gè) cont:1的變量,在組件A中改變cont值為5，這時(shí)候在組件B中獲取這個(gè)值，拿到的還是1，還是混入對(duì)象里的初始值，數(shù)據(jù)不共享
與vuex的區(qū)別
vuex：用來做狀態(tài)管理的，里面定義的變量在每個(gè)組件中均可以使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會(huì)隨之修改
mixins：可以定義共用的變量，在每個(gè)組件中使用，引入組件中之后，各個(gè)變量是相互獨(dú)立的，值的修改在組件中不會(huì)相互影響
與公共組件的區(qū)別
組件：在父組件中引入組件，相當(dāng)于在父組件中給出一片獨(dú)立的空間供子組件使用，然后根據(jù)props來傳值，但本質(zhì)上兩者是相對(duì)獨(dú)立的
關(guān)于“Vue中mixins的使用方法及實(shí)際項(xiàng)目應(yīng)用是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue中mixins的使用方法及實(shí)際項(xiàng)目應(yīng)用是什么”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼