Vue mixin實現(xiàn)組件功能復(fù)用示例詳解
更新時間：2023年10月26日 10:15:09 作者：張旭超
這篇文章主要為大家介紹了Vue mixin實現(xiàn)組件功能復(fù)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
Vue mixin
Vue中的mixin，是來分發(fā)Vue組件中的可復(fù)用功能。
1、方法和數(shù)據(jù)在各個組件中不共享
不像vuex那樣，一個地方修改其他地方也會修改，mixin的數(shù)據(jù)的作用域就是被引入的組件內(nèi)部。
2、引用組件中的鉤子函數(shù)在混入對象中的鉤子函數(shù)后面執(zhí)行。
3、引用組件中的同名方法會覆蓋混入對象中的方法，不同名的會合并。
案例分析
HelloWorld.vue
<template>
<div class="hello">
<div v-for="(item, index) in mixinData" :key="index">
姓名：{{item.name}}， 年齡：{{item.age}}
</div>
</div>
</template>
<script>
import CommonMethods from '../mixin/CommonMethods.vue'
export default {
name: 'HelloWorld',
mixins: [CommonMethods],
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted () {
// 1、引用組件中的鉤子函數(shù)在混入對象中的鉤子函數(shù)后面執(zhí)行。
this.mixinData = [
{ name: '初始化數(shù)據(jù)', age: 10 }
]
// 2、引用組件中的同名方法會覆蓋混入對象中的方法，不同名的會合并。
this.mixinGetData()
},
methods: {
mixinGetData () {
this.mixinData = []
return []
}
}
}
</script>CommonMethods.vue
<script>
export default {
name: 'mixinMethods',
data () {
return {
mixinData: []
}
},
mounted () {
this.mixinData = [
{ name: '初始化數(shù)據(jù)', age: 0 }
]
},
methods: {
mixinGetData () {
let data = [
{ name: 'zxc', age: 32 },
{ name: 'lvy', age: 27 }
]
this.mixinData = data
return data
}
}
}
</script>以上就是Vue mixin實現(xiàn)組件功能復(fù)用的詳細內(nèi)容，更多關(guān)于Vue mixin組件復(fù)用的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(四) 路由vue-router的使用
本篇文章主要介紹了windows下vue-cli及webpack 構(gòu)建網(wǎng)站(四) 路由vue-router的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了Vue+abp微信掃碼登錄的實現(xiàn)代碼示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
VUE?el-table列表搜索功能純前端實現(xiàn)方法
Vue表搜索是指在Vue應(yīng)用中實現(xiàn)對表格數(shù)據(jù)的搜索功能,下面這篇文章主要給大家介紹了關(guān)于VUE?el-table列表搜索功能純前端實現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要為大家介紹了vue3使用el-upload上傳文件實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
? Vue.js就是一套輕量級的 MVVM 框架,本文通過實例代碼給大家介紹Vue 簡介及基本使用教程,感興趣的朋友跟隨小編一起看看吧2025-10-10
vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能
這篇文章主要介紹了vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
完美解決vue 中多個echarts圖表自適應(yīng)的問題
這篇文章主要介紹了完美解決vue 中多個echarts圖表自適應(yīng)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue項目生產(chǎn)環(huán)境性能優(yōu)化的實戰(zhàn)技巧
本文總結(jié)了Vue項目生產(chǎn)環(huán)境性能優(yōu)化的實戰(zhàn)技巧,這些優(yōu)化能顯著提升Vue應(yīng)用的速度、穩(wěn)定性和資源效率,文章通過代碼示例介紹的非常詳細,需要的朋友可以參考下2025-08-08
vue3+element-plus?Dialog對話框的使用與setup?寫法的用法
這篇文章主要介紹了vue3+element-plus?Dialog對話框的使用?與?setup?寫法的使用,本文通過兩種方式結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
Axios?是一個基于?promise?的網(wǎng)絡(luò)請求庫，可以用于瀏覽器和?node.js，是一個第三方插件，第三方異步請求工具庫，這篇文章主要介紹了Axios在vue項目中的封裝方法,需要的朋友可以參考下2022-10-10