Vue 混入

本文将介绍混入,Vue 中的一种代码复用的方法。

一、什么是混入?

混入是 Vue 中的一种代码复用的方法。

二、步骤

  • 定义混入对象,在混入对象中写入可复用的代码
  • 在希望使用可复用代码的组件处混入混入对象

于是乎,混入对象中的内容将被 “混入” 目标组件中。

三、示例

定义混入对象:

1
2
3
4
5
6
7
8
9
10
11
12
export default {
data() {
return {
num: 0
}
},
methods: {
addNum() {
this.num++
}
}
}

混入混入对象:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<div id="app">
<p>{{ num }}</p>
<button @click="addNum">添加</button>
</div>
</template>

<script>
import num from "./mixins/num"

export default {
name: 'App',
mixins: [num]
}
</script>

效果:

四、重名问题

“混入” 不可避免地可能会出现重名问题。

比如混入对象中和组件中均定义了 add() 方法

如果组件和混入对象中发生重名问题,Vue 会以恰当的方式进行 “合并”,并在冲突无法解决时以组件优先。

  • data 会递归合并,深合并,发生冲突时以组件优先

  • 生命周期函数将合并为数组并依次调用

    混入中的生命周期函数优先调用

  • methods、components 等值为对象的选项,将会合并为一个对象,并在名称冲突时以组件优先

五、全局混入

可以全局混入,混入后,混入对象将混入到每个组件之中。

1
2
3
Vue.mixin({
···
})

参考