vue混入mixin使用特點
什么是混入
混入 (mixin) ： 是一種分發(fā)Vue組件中可復用功能的非常靈活的一種方式?；烊雽ο螅╩ixins）是一個js對象，它可以包含我們組件中script項中的任意功能選項，如data、components、created、methods 、computed、watch等等。當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。
創(chuàng)建Mixins
在src目錄下創(chuàng)建一個mixins文件夾，文件夾下新建自己要定義的混入對象js文件。使用對象的形式來定義混入對象，在對象中可定義與vue組件一樣的data、components、created、methods 、computed、watch等屬性，并通過export導出該對象.
代碼示例： pageMixin.js
export const pageMixin={
data() {
return {
page: { // 分頁信息
pageNo: 10, // 當前頁
limit: 10, // 每頁行數(shù)
total: 0, // 列表總數(shù)量
},
tableList: [], // 列表數(shù)據(jù)
loading: false, // 加載列表數(shù)據(jù)的Loading
PAGE_SIZES: [5, 10, 20, 30, 50, 90], // 每頁行數(shù)列表,用于切換每頁行數(shù)
LAYOUT: "total, sizes, prev, pager, next, jumper" // Element表格組件中使用的功能
}
},
methods: {
// 查詢列表數(shù)據(jù)
queryList() {},
// 修改當前頁
handleCurrentChange(pageNo) {
this.page.pageNo = pageNo;
this.queryList();
},
// 修改每頁行數(shù)
handleSizeChange(limit) {
this.page.pageNo = 1;
this.page.limit = limit;
this.queryList();
},
},
}使用Mixins
在需要調用的組件頁面中引入pageMixin.js文件
import {pageMixin} from "@/mixins/pageMixin"
export default {
mixins: [ pageMixin ],
data() {
return {
}
}
}- 組件調用了混入對象故混入對象的選項會合并到當前組件中。
- 當混入對象和組件含有同名選項時，這些選項將以恰當?shù)姆绞竭M行“合并”。比如，數(shù)據(jù)對象在內部會進行遞歸合并，并在發(fā)生沖突時以組件數(shù)據(jù)優(yōu)先，即發(fā)生沖突會覆蓋混入對象的選項。
在組件（Home.vue）中使用
<template>
<div class="home">
<span>This is a Home page</span>
</div>
</template>
<script>
import myMixins from "../mixins"; //導入混入（mixin）
export default {
name: 'Home',
mixins: [myMixins] //使用混入（mixin）
}
</script>注意觀察Home組件里面，并沒有任何的生命周期鉤子或者方法，但是打開頁面之后查看控制臺，卻打印了內容，這就是混入對象中的created鉤子中的console.log()。
mounted生命周期鉤子
<template>
<div class="home">
<span>This is a Home page</span>
</div>
</template>
<script>
import myMixins from "../mixins";
export default {
name: 'Home',
mixins: [myMixins],
mounted(){
this.hello() //在該組件中并沒用定義hello方法，使用的是混入中的hello
}
}
</script>選項合并
當組件和混入對象含有同名選項時，這些選項將以恰當?shù)姆绞竭M行“合并”。數(shù)據(jù)對象在內部會進行遞歸合并，并在發(fā)生沖突時以組件數(shù)據(jù)優(yōu)先。
此時，同名的created生命周期鉤子進行了合并，合并為一個數(shù)組，因此都將被調用。另外，混入對象的鉤子將在組件自身鉤子之前調用。而methods中的hello方法因為沖突，在合并時保留組件中的hello，即優(yōu)先當前組件的選項，因此打印的是“hello from Home!”。
值為對象的選項，例如 methods、components 和 directives，將被合并為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。
可復用性
開篇提過，混入對象可成為一個可復用功能，我們在另外的組件中引入已定義的混入對象，可實現(xiàn)同樣的邏輯與功能。
如在另外一個組件About.vue使用該混入對象
<template>
<div class="about">
<span>This is an About page</span>
</div>
</template>
<script>
import myMixins from "../mixins";
export default {
name: "About",
mixins: [myMixins]
};
</script>混入對象中的console.log均被執(zhí)行了，實現(xiàn)了邏輯或功能的復用。
那么有個問題，如果很多個組件同時使用同一個混入對象，這時候都要重復一個步驟，就是先導入混入對象，然后再使用，類似如下
<script>
import myMixins from "../mixins";
export default {
mixins: [myMixins]
};
</script>這樣未免有點繁瑣，且代碼冗余，此時我們可以使用全局混入來優(yōu)化這個問題。
全局混入
混入也可以進行全局注冊。使用時格外小心！一旦使用全局混入，它將影響每一個之后創(chuàng)建的 Vue 實例。使用恰當時，這可以用來為自定義選項注入處理邏輯。
在main.js中通過Vue.mixin()引入混入對象即可全局使用（作用于該Vue實例下的所有組件）
import mixin from './mixins'; Vue.mixin(mixin)
效果與在每個組件中單獨引入混入對象相同，這便是全局混入。
注意
請謹慎使用全局混入，因為它會影響每個單獨創(chuàng)建的 Vue 實例 (包括第三方組件)。大多數(shù)情況下，只應當應用于自定義選項，就像上面示例一樣。推薦將其作為插件發(fā)布，以避免重復應用混入。
到此這篇關于vue混入mixin使用特點的文章就介紹到這了,更多相關vue混入mixin內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
v-model 指令默認會在 input 事件中加載輸入框中的數(shù)據(jù)（中文輸入法中輸入拼音的過程除外）。這篇文章通過實例代碼給大家介紹Vue.js中 v-model 指令的修飾，感興趣的朋友跟隨小編一起看看吧2018-12-12
Laravel 如何在blade文件中使用Vue組件的示例代碼
這篇文章主要介紹了Laravel 如何在blade文件中使用Vue組件,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了vue中在echarts里設置的定時器清除不掉問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue3中使用router4 keepalive的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue根據(jù)條件不同顯示不同按鈕的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
基于iview-admin實現(xiàn)動態(tài)路由的示例代碼
這篇文章主要介紹了基于iview-admin實現(xiàn)動態(tài)路由的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
vue項目打包解決靜態(tài)資源無法加載和路由加載無效(404)問題
這篇文章主要介紹了vue項目打包，解決靜態(tài)資源無法加載和路由加載無效(404)問題,靜態(tài)資源無法使用，那就說明項目打包后，圖片和其他靜態(tài)資源文件相對路徑不對,本文給大家介紹的非常詳細，需要的朋友跟隨小編一起看看吧2023-10-10
vue3實現(xiàn)alert自定義的plugins方式
這篇文章主要介紹了vue3實現(xiàn)alert自定義的plugins方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
本篇文章主要介紹了vue調用高德地圖實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Vue 組件（component）教程之實現(xiàn)精美的日歷方法示例
組件是我們學習vue必須會的一部分，下面這篇文章主要給大家介紹了關于Vue 組件（component）教程之實現(xiàn)精美的日歷的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01