Vue extends 屬性的用法示例詳解

更新時(shí)間：2022年08月29日 10:27:28 作者：白石橋的鎖匠

這篇文章主要為大家介紹了Vue extends 屬性的用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

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

小結(jié)

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

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

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

您可能感興趣的文章: