Vue extends 屬性的用法示例詳解

Posted on by

引言

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

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 屬性到此其實已經初見端倪——其實 Vue 中所有的組件雖然沒有寫成 React 那種 class 的形式，但是實際來說也是一個類，這個時候，我們可以用 extends 實現對父組件的繼承，同時也支持對這個類進行重寫，這也是面向對象最為關鍵的一步，真沒想到作為前端心心念念的面向對象，其實一直都在自己身邊，隻不過自己沒發現。

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

以上就是Vue extends 屬性的用法示例詳解的詳細內容，更多關於Vue extends 屬性的資料請關註WalkonNet其它相關文章！

推薦閱讀：