混入 (mixin) 提供了一程式設計客棧種非常靈活的方式，來分發 vue 元件中的可複用功能。一個混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被“混合”進入該元件本身的選項。

即 mixin 在引入元件之後，會將元件內部的內容如data、method等屬性與父元件相應內容進行合併。相當於在引入後，父元件的各種屬性方法都被擴充了。

比如在兩個不同的元件的元件中呼叫sayHi方法，需要重複定義，倘若方法比較複雜，程式碼將更加冗餘，但使用mixins 就相對比較簡單了。

首先在 mixin.js 檔案中定義一個混入物件：

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

export default mixin

然後定義兩個元件，分別在元件中引入：

<script>
    import mixin from '../mixin'

    export default {
      mixins: [mixin]
    }
</script>

則兩個元件的列印結果都為：

如果在兩個元件 data 中定義了各自的 userName，則列印結果會引用各自元件中的 userName

如果在兩個元件的 methods 中重複定義了相同的方法，則 mi程式設計客棧xin 中的方法會被覆蓋

給其中一個元件定義自己的 userName 和 sayHi 方法：

<script>
    import mixin from '../mixin'

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

則列印結果：

這有點像註冊了一個 vue 公共方法，可以在多個元件中使用。還有一點類似於在原型物件中註冊方法，並且可以定義相同函式名的方法進行覆蓋。

混入也可以進行全域性註冊，但一般情況下不會全域性使用，因為會汙染 vue 例項。

我一般在專案中會這樣用，比如在多個元件中有用到通用選擇器，選項是：是，否，可以使用 mixin 來新增一個統一的字典項過濾器，來實現選項的回顯。

1. 首先建立一個 Dictionary.js 檔案，用於儲存字典項對應的含義，並將其暴露出去：

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

注：此處建立的 Dictionary.js 檔案，也可以在頁面渲染的時候拿來迴圈選項，具體程式碼如下：

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.然後再建立一個 filter.js 檔案，儲存自定義的過濾函式：

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>
        ....
bQGHxsptk        {{ status | comSelectFilter }}
        ....
    </div>  
</template>

以上就是討論vue中混入mixin的應程式設計客棧用的詳細內容，更多關於vue中混入mixin的應用的資料請關注我們其它相關文章！