vue組件的繼承用法

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，至少還可以重用一部分業務邏輯代碼。