vue 组件继承

1.创建一个公共组件，比如如下

father.vue

<template>
  <div>
    父类：{{this.a}}
    <span>{{title}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 6,
      title: '我是爸爸'
    }
  },
  created() {
    console.log(this.a,'a') // 6
  }

}
</script>

2.son.vue继承

<script>
import test from './test.vue'
export default {
  extends: test,
  name: 'testSon',
  data() {
    return {
      a: 3 // 重新定义了就改写了
    }
  },
  created(){
    console.log(this.a,'子类改写') // 3
    console.log(this.title,'子类不改写') // 我是爸爸
  }

}
</script>