混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。

即 mixin 在引入組件之后，會(huì)將組件內(nèi)部的內(nèi)容如data、method等屬性與父組件相應(yīng)內(nèi)容進(jìn)行合并。相當(dāng)于在引入后，父組件的各種屬性方法都被擴(kuò)充了。

比如在兩個(gè)不同的組件的組件中調(diào)用sayHi方法，需要重復(fù)定義，倘若方法比較復(fù)雜，代碼將更加冗余，但使用mixins 就相對(duì)比較簡單了。

首先在 mixin.js 文件中定義一個(gè)混入對(duì)象：

let mixin = { data () { return { userName: ’mixin’ } }, created () { this.sayHello() }, methods: { sayHello () { console.log(`${this.userName}, welcome`) } }}export default mixin

然后定義兩個(gè)組件，分別在組件中引入：

<script> import mixin from ’../mixin’ export default { mixins: [mixin] }</script>

則兩個(gè)組件的打印結(jié)果都為：

如果在兩個(gè)組件 data 中定義了各自的 userName，則打印結(jié)果會(huì)引用各自組件中的 userName

如果在兩個(gè)組件的 methods 中重復(fù)定義了相同的方法，則 mixin 中的方法會(huì)被覆蓋

給其中一個(gè)組件定義自己的 userName 和 sayHi 方法：

<script> import mixin from ’../mixin’ export default { mixins: [mixin], data() {return { userName: ’BComponent’} }, created () { this.sayHello() }, methods: {sayHello () { console.log(`Hi, ${this.userName}`)} } }</script>

則打印結(jié)果：

這有點(diǎn)像注冊(cè)了一個(gè) vue 公共方法，可以在多個(gè)組件中使用。還有一點(diǎn)類似于在原型對(duì)象中注冊(cè)方法，并且可以定義相同函數(shù)名的方法進(jìn)行覆蓋。

混入也可以進(jìn)行全局注冊(cè)，但一般情況下不會(huì)全局使用，因?yàn)闀?huì)污染 vue 實(shí)例。

我一般在項(xiàng)目中會(huì)這樣用，比如在多個(gè)組件中有用到通用選擇器，選項(xiàng)是：是，否，可以使用 mixin 來添加一個(gè)統(tǒng)一的字典項(xiàng)過濾器，來實(shí)現(xiàn)選項(xiàng)的回顯。

1. 首先創(chuàng)建一個(gè) Dictionary.js 文件，用于保存字典項(xiàng)對(duì)應(yīng)的含義，并將其暴露出去：

export const COMMON_SELECT = [ { code: 0, label: ’是’}, { code: 1, label: ’否’}];

注：此處創(chuàng)建的 Dictionary.js 文件，也可以在頁面渲染的時(shí)候拿來循環(huán)選項(xiàng)，具體代碼如下：

import { COMMON_SELECT } from ’../constants/Dictionary.js’export default { data() {return { comSelectOptions: COMMON_SELECT} }}<select v-mode='selStatus'> <el-option v-for='item in comSelectOptions' :key='item.code' :label='item.label' :value='item.code'></el-option></select>

2.然后再創(chuàng)建一個(gè) filter.js 文件，保存自定義的過濾函數(shù)：

import { COMMON_SELECT } from ’../constants/Dictionary.js’export default { filters: { comSelectFilter: (value) => { const target = COMMON_SELECT.filter(item => {return item.code === value }) return target.length ? target[0].label : value } }}

3.最后在 main.js 中一次性引入 filter 方法：

import filter from ’./mixin/filter’Vue.mixin(filter)

歐了，這樣我們就可以在任一組件中隨意使用了

<template> <div>....{{ status | comSelectFilter }}.... </div> </template>

以上就是討論vue中混入mixin的應(yīng)用的詳細(xì)內(nèi)容，更多關(guān)于vue中混入mixin的應(yīng)用的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！