快捷導(dǎo)航

Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例

更新時(shí)間：2023年06月06日 10:45:56 作者：菜園前端

這篇文章主要為大家介紹了Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Mixin 混入

混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。

怎么理解呢，就是每一個(gè)組件都會(huì)有一些選項(xiàng) data、computed、methods ...對(duì)吧，假設(shè)我有 10 個(gè)組件，每一個(gè)組件內(nèi)都有一個(gè)相同的 methods 方法，那我就將這個(gè)可復(fù)用的方法抽離到 mixin 文件中，然后在引入進(jìn)來。這樣我就不需要每個(gè)組件都編寫重復(fù)的 methods 方法了，data、mounted 等等的選項(xiàng)也是如此。

基礎(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ù)覽效果

選項(xiàng)合并

因?yàn)榛烊霑?huì)把它本身的選項(xiàng)和組件的選項(xiàng)一起合并，那么也就是說會(huì)發(fā)生一些沖突，例如混入中的文件含有 name 屬性，而組件的選項(xiàng) data 中也存在 name 屬性，那頁面渲染的時(shí)候會(huì)以哪個(gè)為準(zhǔn)呢？接下來進(jìn)行測(cè)試一下。

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ù)覽效果

可以看出來是以組件選項(xiàng)的為準(zhǔn)，這里只舉例了選項(xiàng) data 的沖突，其他選項(xiàng) methods、computed、mounted 也是如此，小伙伴們可以自行去測(cè)試一下。在開發(fā)的時(shí)候需要多留意一下沖突的情況。

您可能感興趣的文章:

相關(guān)文章

Vue.js做select下拉列表的實(shí)例(ul-li標(biāo)簽仿select標(biāo)簽)
下面小編就為大家分享一篇Vue.js做select下拉列表的實(shí)例(ul-li標(biāo)簽仿select標(biāo)簽)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue中如何使用mock模擬數(shù)據(jù)
這篇文章主要介紹了Vue中如何使用mock模擬數(shù)據(jù)，具有很好的價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue的axios和mock.js你了解嗎
這篇文章主要為大家詳細(xì)介紹了vue的axios和mock.js，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
基于vue+h5實(shí)現(xiàn)車牌號(hào)輸入框功能(demo)
最近開發(fā)項(xiàng)目是學(xué)校校內(nèi)車輛超速方面的統(tǒng)計(jì)檢測(cè)方面的系統(tǒng),在開發(fā)過程中發(fā)現(xiàn)有個(gè)小功能,就是用戶移動(dòng)端添加車牌號(hào),剛開始想著輸入框,提交時(shí)正則效驗(yàn)一下格式,最后感覺不方便,所以就簡單自己手寫了一個(gè)H5車牌號(hào)軟鍵盤,對(duì)vue車牌號(hào)輸入框?qū)崿F(xiàn)代碼感興趣的朋友一起看看吧
2025-03-03
vue之el-upload使用FormData多文件同時(shí)上傳問題
這篇文章主要介紹了vue之el-upload使用FormData多文件同時(shí)上傳問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue使用element-resize-detector監(jiān)聽元素寬度變化方式
這篇文章主要介紹了vue使用element-resize-detector監(jiān)聽元素寬度變化方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue 彈出框引入另一個(gè)vue頁面的示例代碼
這篇文章主要介紹了vue 彈出框引入另一個(gè)vue頁面,這種方式適用于在一個(gè)頁面邏輯比較多的時(shí)候,可以搞多個(gè)頁面,防止出錯(cuò),本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
vue實(shí)現(xiàn)原理this.$message實(shí)例詳解
這篇文章主要介紹了vue實(shí)現(xiàn)原理this.$message實(shí)例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-03-03
Vue3自定義指令語法圖文詳解
這篇文章主要給大家介紹了Vue3自定義指令的相關(guān)資料,自定義指令是一種在Vue應(yīng)用程序中擴(kuò)展HTML標(biāo)簽的能力,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-09-09
使用Vue實(shí)現(xiàn)調(diào)用接口加載頁面初始數(shù)據(jù)
今天小編就為大家分享一篇使用Vue實(shí)現(xiàn)調(diào)用接口加載頁面初始數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10