引言

最近在看抖音——《小山與 bug》，看到一個很神奇的 Vue 繼承組件的方法，后來專門去翻了 element 和 iview 的源碼，發(fā)現(xiàn)這個屬性的用法好像在這些框架里還沒有用到過，懷著試一試的態(tài)度，我就自己搭建了個測試項目，發(fā)現(xiàn)其實還是挺好用的，甚至有望代替目前我們前端框架業(yè)務代碼混入的底層實現(xiàn)。話不多說，直接上代碼：

App.vue

<template>
  <div>
    <Son></Son>
  </div>
</template>
<script>
import Son from "./components/Son";
export default {
  components: {
    Son,
  },
};
</script>
<style scoped></style>

Son.vue

<template>
</template>
<script>
import HelloWorld from "./HelloWorld.vue";
export default {
  extends: HelloWorld,
  data() {
    return {
      aa: 10,
    };
  },
};
</script>

HelloWorld.vue

<template>
  <div>
    <h1>{{ aa }}</h1>
    <h1>{{ bb }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      aa: 0,
      bb: 123,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.aa += 10;
    },
  },
};
</script>
<style scoped></style>

小結

可以看到，Son 組件繼承了 HelloWorld 組件，并且修改了 aa 的初始值，運行代碼我們可以看到，界面上顯示的 aa 變成了 20，不再是 10，那么這個 extends 屬性到此其實已經(jīng)初見端倪——其實 Vue 中所有的組件雖然沒有寫成 React 那種 class 的形式，但是實際來說也是一個類，這個時候，我們可以用 extends 實現(xiàn)對父組件的繼承，同時也支持對這個類進行重寫，這也是面向對象最為關鍵的一步，真沒想到作為前端心心念念的面向對象，其實一直都在自己身邊，只不過自己沒發(fā)現(xiàn)。

基于上述情況，我們就可以得出一套 Vue 前端框架實現(xiàn)思路，就是我們先針對標準的業(yè)務邏輯開發(fā)一套代碼，然后作為底層架構，然后我們在關鍵的地方，比如數(shù)據(jù)加載前，彈窗打開前等等有可能會編寫不同的業(yè)務邏輯的地方，封裝一些操作前，操作后方法，默認這些方法為空，啥都不干，當我們配置好了框架，針對每個菜單，去編寫對應的組件，這些組件都要繼承通用的模板，然后可以針對這些操作前，操作后方法進行重寫，比如在操作前方法里加個校驗，對框架的某個組件進行重寫定義等等，這樣就可以實現(xiàn)不同的業(yè)務場景復用一套代碼了。

以上就是Vue extends 屬性的用法示例詳解的詳細內容，更多關于Vue extends 屬性的資料請關注腳本之家其它相關文章！