我们在开发过程中,因为需求的变更,往往会遇见对现有组件的改造和扩展。
那么我们有什么方法对现有组件进行改造和扩展呢?
常见的我们可以使用mixins方式
下面就让我们来看一下怎么使用mixins方式对组件进行改造
我们来先创建一个简单的组件,如一个button和一个数字,点击一次数字加一
<template> <div class="home"> <p>{{ count }}</p> <button @click="addcount()">新增</button> </div> </template> <script> export default { name: 'homeworld', data () { return { count: 0 } }, methods: { addcount () { this.count++; } } } </script>
如果我们现在想改变需求,点击按钮,数字新增,但是新增我的值我们自己定义
使用mixins实现,下面是改造过后的组件
<script> import helloworld from './HelloWorld' export default { name: 'homeworld', props: ['index'], // index为传入的数量 mixins: [helloworld], // mixins 原先的组件 methods: { //重写 addcount 方法 addcount () { this.count += parseInt(this.index); } } } </script>
如果我们调用下面的组件并且传入属性index=5, 那么我们就会实现没点击一次count+5
使用mixins我们确实可以实现对现有组件的改造,但是他也是有一些缺点的,
1.我们必须要知道改造组件的内部结构,就如我们不知道点击事件名,那么我们就不能重写新的点击事件,我们也需要知道组件的内部属性等等。
2.两个组件有很强的依赖性,如果是嵌套加嵌套,代码就很难去追寻本源,太乱了。
那么我们有没有更好的方法去对组件进行扩展呢?
答案是有的我们可以使用高级组件,专业术语是HOC,其实就是包裹组件的组件
其实常见的高阶组件我们经常使用,如keep-alive, transition,一个是缓存组件,一个是动画
Vue目前还是使用mixin作为官方的组件复用方式。
如果想了解更多的hot可以看看这篇文章
https://github.com/coolriver/coolriver-site/blob/master/markdown/vue-mixin-hoc.md
- 暂时由热心人士产出了一个npm包: vue-hoc来帮助Vue方便地实现HOC.
- 官方暂时不考虑将HOC加入vue core中,因为觉得相比于mixin的优势不够巨大。
自己也试了一些,感觉hoc达不到自己想要的那种效果。可能还是自己不够理解。