Vue extends 属性的用法示例详解
引言
最近在看抖音——《小山与 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 属性的资料请关注脚本之家其它相关文章！
相关文章
今天小编就为大家分享一篇解决vue的 v-for 循环中图片加载路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
解决vue中使用swiper插件问题及swiper在vue中的用法
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。这篇文章主要介绍了解决vue中使用swiper插件及swiper在vue中的用法,需要的朋友可以参考下2018-04-04
这篇文章主要为大家介绍了vue3使用Facebook嵌入式视频播放器API方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
我们经常需要在Vue搭建的后台管理系统里进行数据导入导出等操作,下面这篇文章主要给大家介绍了关于Vue实现数据导出导入实战案例的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue如何监听某个元素的大小变化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了全面介绍vue 全家桶和项目实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了vue中使用render封装一个select组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
在项目开发中，我们会遇到这种需求，在管理后台添加自定义表单，在指定的页面使用定义好的表单，这篇文章主要介绍了Vue elementUI 自定义表单模板组件,需要的朋友可以参考下2022-12-12
本文主要介绍了M1 pro芯片启动Vue项目的方法步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
在 Vue 3 中设置 `@` 指向根目录的几种常见方法汇总
在 Vue 3 项目开发中,为了方便管理和引用文件路径,设置 @ 指向根目录是一项常见的需求,下面给大家分享在Vue3中设置 `@` 指向根目录的方法汇总,感兴趣的朋友一起看看吧2024-06-06
最新评论