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>

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐