vue mixins與extends的使用方法

這次帶給大家vue mixins與extends的使用方法，vue mixins與extends使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

vue提供了mixins、extends設定項，最近使用中發現很好用。

混合mixins和繼承extends

# 看看官方文件怎麼寫的，其實兩個都可以理解為繼承，mixins接收物件陣列（可理解為多繼承），extends接收的是物件或函數（可理解為單繼承）。

繼承鉤子函數

const extend = {
 created () {
  console.log('extends created')
 }
}
const mixin1 = {
 created () {
  console.log('mixin1 created')
 }
}
const mixin2 = {
 created () {
  console.log('mixin2 created')
 }
}
export default {
 extends: extend,
 mixins: [mixin1, mixin2],
 name: 'app',
 created () {
  console.log('created')
 }
}

控制台輸出

extends created
mixin1 created
mixin2 created
created

• 結論: 優先呼叫mixins和extends繼承的父類，extends觸發的優先權更高，相對於是隊列

• push(extend, mixin1, minxin2, 本身的鉤子函數)

• 經過測試， watch的值繼承規則一樣。

# 繼承methods

const extend = {
 data () {
  return {
   name: 'extend name'
  }
 }
}
const mixin1 = {
 data () {
  return {
   name: 'mixin1 name'
  }
 }
}
const mixin2 = {
 data () {
  return {
   name: 'mixin2 name'
  }
 }
}
// name = 'name'
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app',
 data () {
  return {
   name: 'name'
  }
 }
}
// 只写出子类，name = 'mixin2 name'，extends优先级高会被mixins覆盖
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app'
}
// 只写出子类，name = 'mixin1 name'，mixins后面继承会覆盖前面的
export default {
 mixins: [mixin2, mixin1],
 extends: extend,
 name: 'app'
}

• # 結論：子類別再次聲明，data中的變數都會被重寫，以子類別的為準。

• 如果子類別不聲明，data中的變數將會最後繼承的父類別為準。

• 經過測試，props中屬性 、 methods中的方法 和 computed的值 繼承規則一樣。

# 以下單獨介紹下mixins、extends、extend

mixins

呼叫方式: mixins: [mixin1, mixin2]

# 是父組件的擴充，包括methods、components、directive等。 。 。

觸發鉤子函數時，先呼叫mixins的函數，再呼叫父元件的函數。

雖然也能在建立mixin時加入data、template屬性，但當父元件也擁有此屬性時以父為準，從這一點也能看出製作者的用心（擴充）。

data、methods內函數、components和directives等鍵值對格式的物件皆以父元件/實例為準

extends

呼叫方式: extends: CompA

# 同樣是對父元件的擴充，與mixins類似，但優先權均次於父元件

extend

擴充組件的建構器

當我們呼叫vue.component('a', {...})時自動呼叫

值得注意的是extend內的data為一個函數

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

axios用戶端中ajax請求方式

#vue.js vue-router提升使用者體驗

以上是vue mixins與extends的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！