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>