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

（注：本文適用於有一定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 定義乙個使...