Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例
Mixin 混入
混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。
怎么理解呢，就是每一個組件都會有一些選項 data、computed、methods ...對吧，假設(shè)我有 10 個組件，每一個組件內(nèi)都有一個相同的 methods 方法，那我就將這個可復(fù)用的方法抽離到 mixin 文件中，然后在引入進來。這樣我就不需要每個組件都編寫重復(fù)的 methods 方法了，data、mounted 等等的選項也是如此。
基礎(chǔ)案例
hello-world.vue
<template>
<div class="home">
{{ name }}
</div>
</template>
<script>
import mixin from './mixin.js'
export default {
mixins: [mixin],
data() {
return {}
}
}
</script>mixin.js
export default {
data() {
return {
name: 'xiaoming'
}
}
}預(yù)覽效果
選項合并
因為混入會把它本身的選項和組件的選項一起合并，那么也就是說會發(fā)生一些沖突，例如混入中的文件含有 name 屬性，而組件的選項 data 中也存在 name 屬性，那頁面渲染的時候會以哪個為準呢？接下來進行測試一下。
hello-world.vue
<template>
<div class="home">
{{ name }}
</div>
</template>
<script>
import mixin from './mixin.js'
export default {
mixins: [mixin],
data() {
return {
name: 'libai'
}
}
}
</script>mixin.js
export default {
data() {
return {
name: 'xiaoming'
}
}
}預(yù)覽效果
可以看出來是以組件選項的為準，這里只舉例了選項 data 的沖突，其他選項 methods、computed、mounted 也是如此，小伙伴們可以自行去測試一下。在開發(fā)的時候需要多留意一下沖突的情況。
相關(guān)文章
Vue.js做select下拉列表的實例(ul-li標簽仿select標簽)
下面小編就為大家分享一篇Vue.js做select下拉列表的實例(ul-li標簽仿select標簽)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue中如何使用mock模擬數(shù)據(jù)，具有很好的價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細介紹了vue的axios和mock.js，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
基于vue+h5實現(xiàn)車牌號輸入框功能(demo)
最近開發(fā)項目是學(xué)校校內(nèi)車輛超速方面的統(tǒng)計檢測方面的系統(tǒng),在開發(fā)過程中發(fā)現(xiàn)有個小功能,就是用戶移動端添加車牌號,剛開始想著輸入框,提交時正則效驗一下格式,最后感覺不方便,所以就簡單自己手寫了一個H5車牌號軟鍵盤,對vue車牌號輸入框?qū)崿F(xiàn)代碼感興趣的朋友一起看看吧2025-03-03
vue之el-upload使用FormData多文件同時上傳問題
這篇文章主要介紹了vue之el-upload使用FormData多文件同時上傳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue使用element-resize-detector監(jiān)聽元素寬度變化方式
這篇文章主要介紹了vue使用element-resize-detector監(jiān)聽元素寬度變化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue 彈出框引入另一個vue頁面,這種方式適用于在一個頁面邏輯比較多的時候,可以搞多個頁面,防止出錯,本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-08-08
vue實現(xiàn)原理this.$message實例詳解
這篇文章主要介紹了vue實現(xiàn)原理this.$message實例詳解,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要給大家介紹了Vue3自定義指令的相關(guān)資料,自定義指令是一種在Vue應(yīng)用程序中擴展HTML標簽的能力,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-09-09
使用Vue實現(xiàn)調(diào)用接口加載頁面初始數(shù)據(jù)
今天小編就為大家分享一篇使用Vue實現(xiàn)調(diào)用接口加載頁面初始數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10