應用三 Vue之混入 mixin 與全域性混入

2022-07-26 16:54:11 字數 1291 閱讀 6054

(注:本文適用於有一定vue基礎或開發經驗的讀者,文章就知識點的講解不一定全面,但卻是開發過程中很實用的)

首先介紹一下混入mixin的概念:

官方文件:混入提供了一種非常靈活的方式,來分發 vue 元件中的可復用功能。乙個混入物件可以包含任意元件選項。當元件使用混入物件時,所有混入物件的選項將被「混合」進入該元件本身的選項。

個人理解:混入就是用來對vue元件中的公共部分,包括資料物件、鉤子函式、方法等所有選項,進行提取封裝,以達到**的復用。

接下來通過乙個簡單的例子看看混入的基礎用法:

首先新建乙個mixin.js檔案,新增以下**。

let mixin =

},created() ,

methods:

}}export

default mixin;

然後新建乙個index.vue檔案,新增以下**。

}

注意:在index.vue檔案中要先引入mixin.js檔案,然後就可以直接使用mixin.js中定義的資料msg和方法show。

而對於混入物件以及元件自身的created鉤子函式呢,它們都將被呼叫。但混入物件的鉤子會在元件自身的鉤子之前呼叫。

如果元件自身定義了與鉤子物件中同名的資料或方法,為了避免衝突,vue將優先使用元件自身的資料或方法。

當然也可以將混入物件全域性註冊,在之後新建的所有vue元件中就都可以使用。

接下來分享一下全域性混入的註冊方法。

方法一:在工程的main.js中直接註冊,實現如下:

import vue from 'vue';

vue.mixin(

});/*

eslint-disable no-new

*/new

vue(

})}}

然後在main.js中引入該檔案並使用use方法進行註冊

import vue from 'vue';

import mymixin from './mixin.js';

vue.use(mymixin);

/*eslint-disable no-new

*/new

vue({

應用三 Vue之混入 mixin 與全域性混入

注 本文適用於有一定vue基礎或開發經驗的讀者,文章就知識點的講解不一定全面,但卻是開發過程中很實用的 首先介紹一下混入mixin的概念 官方文件 混入提供了一種非常靈活的方式,來分發 vue 元件中的可復用功能。乙個混入物件可以包含任意元件選項。當元件使用混入物件時,所有混入物件的選項將被 混合 ...

vue系列 混入(mixin)

一 混入的理解 1 混入 mixin 就是乙個vue物件,你可以認為,混入是把每個vue元件的公共部分的內容抽取出來了。即提高了 的復用性。2 假設每個vue元件裡的都有同樣的函式testf,而且完成的功能是一模一樣的,怎麼辦,不能像原生js那樣單獨封裝個函式吧,肯定不行,那這就是混入 mixin ...

Vue學習筆記之混入 mixin

目錄 選項合併 全域性混入 自定義選項合併策略 混入 mixin 提供了一種非常靈活的方式,來分發vue元件的可復用功能。乙個混入物件可以包含任意元件選項。當元件使用混入物件時,所有混入物件的選項將被 混合 進入該元件本身的選項。定義乙個混入的物件 var mymixin methods 定義乙個使...