Mixin混入分發(fā)Vue組件可復用功能基礎示例
更新時間：2023年06月06日 10:45:56 作者：菜園前端
這篇文章主要為大家介紹了Mixin混入分發(fā)Vue組件可復用功能基礎示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
Mixin 混入
混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。
怎么理解呢，就是每一個組件都會有一些選項 data、computed、methods ...對吧，假設我有 10 個組件，每一個組件內(nèi)都有一個相同的 methods 方法，那我就將這個可復用的方法抽離到 mixin 文件中，然后在引入進來。這樣我就不需要每個組件都編寫重復的 methods 方法了，data、mounted 等等的選項也是如此。
基礎案例
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'
}
}
}預覽效果
選項合并
因為混入會把它本身的選項和組件的選項一起合并，那么也就是說會發(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'
}
}
}預覽效果
可以看出來是以組件選項的為準，這里只舉例了選項 data 的沖突，其他選項 methods、computed、mounted 也是如此，小伙伴們可以自行去測試一下。在開發(fā)的時候需要多留意一下沖突的情況。
相關文章
vue3中配置文件vue.config.js不生效的解決辦法
這篇文章主要介紹了vue3中配置文件vue.config.js不生效的解決辦法,文中通過代碼示例講解的非常詳細,對大家解決問題有一定的幫助,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vue下拉框回顯并默認選中隨機問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue解決跨域問題，本文通過實例圖文相結(jié)合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
這篇文章主要介紹了10分鐘上手vue-cli 3.0 入門介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue2.0實戰(zhàn)之使用vue-cli搭建項目（2）
這篇文章主要為大家詳細介紹了vue2.0實戰(zhàn)第二篇使用vue-cli搭建項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了關于antd中select搜索框改變搜索值的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue+element 解決瀏覽器自動填充記住的賬號密碼問題
我們在做form表單的時候,會發(fā)現(xiàn),瀏覽器會自動的將我們之前保存的密碼,自動的填充到表單中input 為 type="password" 的框中，如何實現(xiàn)此功能呢，下面小編給大家介紹下，感興趣的朋友一起看看吧2019-06-06
父子組件生命周期及子組件獲取數(shù)據(jù)傳值問題剖析
這篇文章主要介紹了父子組件生命周期及子組件獲取數(shù)據(jù)問題剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10
這篇文章主要介紹了Vue如何實現(xiàn)自動觸發(fā)功能，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了vue.js中修飾符.stop的用法解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03