Vue 混入
本文将介绍混入,Vue 中的一种代码复用的方法。
一、什么是混入?
混入是 Vue 中的一种代码复用的方法。
二、步骤
- 定义混入对象,在混入对象中写入可复用的代码
- 在希望使用可复用代码的组件处混入混入对象
于是乎,混入对象中的内容将被 “混入” 目标组件中。
三、示例
定义混入对象:
1 |
|
混入混入对象:
1 |
|
效果:
四、重名问题
“混入” 不可避免地可能会出现重名问题。
比如混入对象中和组件中均定义了
add()
方法
如果组件和混入对象中发生重名问题,Vue 会以恰当的方式进行 “合并”,并在冲突无法解决时以组件优先。
data 会递归合并,深合并,发生冲突时以组件优先
生命周期函数将合并为数组并依次调用
混入中的生命周期函数优先调用
methods、components 等值为对象的选项,将会合并为一个对象,并在名称冲突时以组件优先
五、全局混入
可以全局混入,混入后,混入对象将混入到每个组件之中。
1 |
|