Vue组件的继承用法

封装组件，小功能建议用封装，大功能建议用组件继承，因为大功能在结合搜参数的需要多重的判断，这样会导致封装的组件比较繁杂，出现过多的判断，用继承可以改写基类中的方法和数据

父类---父组件

<template>
  <div id="Hello">
    <h3>父类:{{name}}</h3>
    <span>{{title}}</span>
  </div>
</template>

<script>
export default {
  name: 'HelloContainer',
  data() {
    return {
      name: '父组件',
      title: 'Vue组件的继承用法'
    }
  },
  mounted() {
    console.log('我是父组件', this.name)
  },
  methods: {
    handle() {
      console.log('我是父组件方法')
    }
  }
}
</script>

<style>
</style>

继承--父类

<template>
  <div id="App">
  </div>
</template>

<script>
import Hellow from './components/Hello.vue'
export default {
  name: 'App',
  继承----重写了继承的模板
  继承了父类的所有东西, 当前的data, 方法都继承了。

  extends: Hellow,
  data() {
    return {}
  },
  mounted() {
    console.log('子类继承父组件, 可以使用父组件的data中的属性', this.name)
    this.handle()
  },
  methods: {}
}
</script>

<style scoped>
</style>

继承 父类的所有东西，当前的data, 方法都继承。

父类 的模板template被重写覆盖了。

改写父类

<template>
  <div id="App">
    <h3>子组件:{{name}}</h3>
    <span>{{title}}</span>
  </div>
</template>

<script>
import Hellow from './components/Hello.vue'
export default {
  name: 'App',
  // 继承----重写了继承的模板
  // 继承了父类的所有东西, 当前的data, 方法都继承了
  extends: Hellow,
  data() {
    return {}
  },
  mounted() {
    console.log('子类继承父组件, 可以使用父组件的data中的属性', this.name)
    this.handle()
    this.name = '子组件更改了name'
    this.title = '子组件更改了title'
  },
  methods: {
    handle() {
      console.log('子组件改写方法')
    }
  }
}
</script>

<style scoped>
</style>

改写后，父类的值---被覆写了，方法也被覆写了，html模板也完全被覆盖了。

-----但是不会影响父组件原来的 data 与 方法。

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