vue中混入mixin的應用實例

這篇文章主要介紹了vue中混入mixin的應用實例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

混入 (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 中重復定義了相同的方法，則 mixin 中的方法會被覆蓋

給其中一個組件定義自己的 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>

則打印結果：

這有點像注冊了一個 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>
        ....
        {{ status | comSelectFilter }}
        ....
    </div>  
</template>

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue中混入mixin的應用實例”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!