Vue extends 属性的用法示例详解
目录
- 引言
- App.vue
- Son.vue
- HelloWorld.vue
- 小结
引言
最近在看抖音——《小山与 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 属性的资料请关注我们其它相关文章!
赞 (0)