Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例
Mixin 混入
混入 (mixin) 提供了一種非常靈活的方式，來(lái)分發(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)來(lái)。這樣我就不需要每個(gè)組件都編寫(xiě)重復(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)一起合并，那么也就是說(shuō)會(huì)發(fā)生一些沖突，例如混入中的文件含有 name 屬性，而組件的選項(xiàng) data 中也存在 name 屬性，那頁(yè)面渲染的時(shí)候會(huì)以哪個(gè)為準(zhǔn)呢？接下來(lái)進(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ù)覽效果
可以看出來(lái)是以組件選項(xiàng)的為準(zhǔn)，這里只舉例了選項(xiàng) data 的沖突，其他選項(xiàng) methods、computed、mounted 也是如此，小伙伴們可以自行去測(cè)試一下。在開(kāi)發(fā)的時(shí)候需要多留意一下沖突的情況。
相關(guān)文章
vue3中配置文件vue.config.js不生效的解決辦法
這篇文章主要介紹了vue3中配置文件vue.config.js不生效的解決辦法,文中通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家解決問(wèn)題有一定的幫助,需要的朋友可以參考下2024-05-05
Vue下拉框回顯并默認(rèn)選中隨機(jī)問(wèn)題
這篇文章主要介紹了Vue下拉框回顯并默認(rèn)選中隨機(jī)問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue解決跨域問(wèn)題，本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
這篇文章主要介紹了10分鐘上手vue-cli 3.0 入門(mén)介紹，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
vue2.0實(shí)戰(zhàn)之使用vue-cli搭建項(xiàng)目（2）
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)戰(zhàn)第二篇使用vue-cli搭建項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
關(guān)于antd中select搜索框改變搜索值的問(wèn)題
這篇文章主要介紹了關(guān)于antd中select搜索框改變搜索值的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue+element 解決瀏覽器自動(dòng)填充記住的賬號(hào)密碼問(wèn)題
我們?cè)谧鰂orm表單的時(shí)候,會(huì)發(fā)現(xiàn),瀏覽器會(huì)自動(dòng)的將我們之前保存的密碼,自動(dòng)的填充到表單中input 為 type="password" 的框中，如何實(shí)現(xiàn)此功能呢，下面小編給大家介紹下，感興趣的朋友一起看看吧2019-06-06
父子組件生命周期及子組件獲取數(shù)據(jù)傳值問(wèn)題剖析
這篇文章主要介紹了父子組件生命周期及子組件獲取數(shù)據(jù)問(wèn)題剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
Vue如何實(shí)現(xiàn)自動(dòng)觸發(fā)功能
這篇文章主要介紹了Vue如何實(shí)現(xiàn)自動(dòng)觸發(fā)功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了vue.js中修飾符.stop的用法解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03