vue-mixins和vue高阶组件

我们在开发过程中，因为需求的变更，往往会遇见对现有组件的改造和扩展。

那么我们有什么方法对现有组件进行改造和扩展呢？

常见的我们可以使用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

1. 暂时由热心人士产出了一个npm包: vue-hoc来帮助Vue方便地实现HOC.
2. 官方暂时不考虑将HOC加入vue core中，因为觉得相比于mixin的优势不够巨大。

自己也试了一些，感觉hoc达不到自己想要的那种效果。可能还是自己不够理解。

vue-mixins和vue高阶组件

原文：https://www.cnblogs.com/czkolve/p/11240968.html