vue中使用extends继承父类组件改写data属性问题

记首次开博 

给大家分享最近踩到的一个vue开发中的坑

最近跳槽换了一家公司，技术栈也从Ng4换成了vue.js 2.0版本，使用的vue-cli脚手架

由于是开发的一个后台管理系统  大部分模块的table都差不太多，那当然是选择使用继承的方式来实现 less code,do more things!

查阅vue官方API发现确实也提供了extends解决途径

当我开发好base基类组件 业务组件中也成功继承到了基类组件后 项目也按照预期实现了效果

（由于现在在家，公司项目代码没在自己电脑本地，就随便写了个todo,方便大家理解）

下面的是我的基类base组件

我在data里面定义了一个属性a，值为空的字符串

<template>
  <div>
    这是基类组件
    <button @click="onclick">返回首页</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      a: ''
    }
  },
  created () {
    console.log(this.a)
  },
  methods: {
    onclick () {
      this.$router.push({name: 'home'})
    }
  }
}
</script>

接下来是我的业务组件

常见的思路一般是业务组件可以重写父类属性a,

比如我在业务组件中希望我的属性a是 ‘6’

<