vue组件的继承用法

大家好，欢迎来到IT知识分享网。

vue组件的继承适用于UI几乎一样，只是数据不一样的情况下，但是这种情况通过统一封装组件也是能实现的，小功能建议用封装，大功能建议用组件继承，因为大功能在结合搜参数的需要多重的判断，这样会导致封装的组件比较繁杂，出现过多的判断，用继承可以改写基类中的方法和数据

下面来看个例子

基类：

<!--
 * @Author: your name
 * @Date: 2020-05-26 15:22:12
 * @LastEditTime: 2020-05-27 11:40:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admin-master\src\views\test\base.vue
 -->

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

<script>
export default {
  components: {},
  data () {
    return {
        a:6,
        title:''
    };
  },


  created() {
      console.log('base',this.a)
  },
  computed: {},

  mounted() {},

  methods: {
      add(){
         console.log('父类方法') 
      }
  }
}

</script>
<style lang='scss' scoped>
</style>

不改写基类的例子：

<!--
 * @Author: your name
 * @Date: 2019-12-20 16:04:14
 * @LastEditTime: 2020-05-27 11:41:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admin-master\src\views\test\index.vue
 -->


<script>
import base from "./base";
export default {
  extends: base,
  name: "test",
  components: {},
  data() {
    return {
     
    };
  },

  created() {
    console.log(this)
    console.log("子类不改写", this.a);
    this.add()
    this.title ='不改写'

  },
  computed: {},

  methods: {
   
  },
  mounted() {}
};
</script>

结果：

可以看见，不该写基类的时候，继承了父类的所有东西，当前的data，dom，方法都继承了

下面看改写父类：

<!--
 * @Author: your name
 * @Date: 2019-12-20 16:04:14
 * @LastEditTime: 2020-05-27 13:57:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admin-master\src\views\test\index.vue
 -->

 
<template>
  <div>子类改写</div>
  
</template>

<script>
import base from "./base";

export default {
  extends: base,
  name: "test1",
  components: {},
  data() {
    return {
      a: 3
    };
  },

  created() {
    this.title ='改写'
    console.log("子类改写参数", this.a);
  },
  computed: {},

  methods: {
    add(){
      console.log('子类改写方法')
    }
  },
  mounted() {}
};
</script>

结果：

控制台：

我们会发现，改写后基类的值也被覆写了，方法也被覆写了，html模板也完全被改写了

HTML模板要么完全继承，要么完全重写，不能按需继承某个部分。如果子类在结构上跟基类有所差异，还是需要在基类中做条件判断。如果模板差异太大，可以重新定义子类自己的template，至少还可以重用一部分业务逻辑代码。