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

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

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

巴特西

vue-mixins和vue高阶组件

最新文章

热门文章