一起學vue的mixin

前言

如果你在寫vue元件時，發現有幾個元件的邏輯差不多類似，那麼你就可以使用vue的mixin（混入），把類似的邏輯抽離出來封裝成js ，然後在各個組件引入使用。

mixin就是用來解決vue元件邏輯重複使用的問題。今天咱們來學vue的mixin。

mixin

mixin主要是針對vue的js邏輯重複使用，所以它通常都是js檔。

用法

先來看看它的用法

// name.js
export default {
  data () {
    return {
      name: 'mixin的name',
      obj: {name:'mixin', value:'mixin'}
    }
  },
  methods: {
    getName () {
      console.log('我是mixin,name:', this.name)
      console.log('obj:', this.obj)
    }
  },
  mounted () {
    console.log('我是mixin的mounted')
    this.getName()
  }
}

它的用法和vue元件的用法是一樣的。例如鉤子函數，methods的方法，data的資料等等。

然後在元件使用，透過mixins選項即可引入。

import name from './name.js'
export default {
  mixins: [name],
  data () {
  }
}

那麼就會有一個問題，那麼如果元件內也定義了同樣的鉤子函數，同名方法，同名數據，該以誰的為準？是覆蓋還是合併？

透過範例來看看

import name from './name.js'
export default {
  mixins: [name],
  data () {
    name: '组件的name',
    obj: {name:'component'}
  },
  methods: {
    getName () {
      console.log('我是组件,name:', this.name)
      console.log('obj:', this.obj)
    }
  },
  mounted () {
    console.log('我是组件的mounted')
    this.getName()
  }
}

列印的結果如下：

透過上述結果可以得到，

鉤子函數會合併起來，都會執行。 先執行mixins的鉤子函數再執行元件的鉤子函數。

data的同名數據，要分情況討論

如果是基本類型，會用元件的同名資料覆寫mixin的資料。

但是如果是對象，會遞歸對比key，如果是同名key則會覆蓋，如果不是同名的，則保留。

methods的方法也是一樣，會用元件的方法覆寫mixin的同名方法。

除了上面這些選項，還有例如components（元件），和directives(指令)等也是一樣的邏輯，同名的會覆蓋，以組件的為優先。

mixin不好的地方

mixin我用的過程我覺得不好的地方就是，變數名稱不好找，不容易聯想到是在mixin中定義的。

所以就會出現，這個變數名稱是不是沒有定義？我怎麼只找到使用的地方，沒有找到定義的地方？

最後發現使用了mixin之後才恍然大悟。

推薦學習：《vue影片教學》

以上是一起學vue的mixin的詳細內容。更多資訊請關注PHP中文網其他相關文章！