Vue组件的继承用法示例详解_vue.js_

Vue组件的继承用法

vue组件的继承适用于UI几乎一样，只是数据不一样的情况下，但是这种情况通过统一封装组件也是能实现的，小功能建议用封装，大功能建议用组件继承，因为大功能在结合搜参数的需要多重的判断，这样会导致封装的组件比较繁杂，出现过多的判断，用继承可以改写基类中的方法和数据

基类案例：

继承基类案例：

效果：

可以看见，不改写基类的时候，继承了父类的所有东西，当前的data，dom，方法都继承了

改写父类案例：

效果：

我们会发现，改写后基类的值也被覆写了，方法也被覆写了，html模板也完全被改写了

HTML模板要么完全继承，要么完全重写，不能按需继承某个部分。如果子类在结构上跟基类有所差异，还是需要在基类中做条件判断。如果模板差异太大，可以重新定义子类自己的template，至少还可以重用一部分业务逻辑代码。

到此这篇关于Vue组件的继承用法的文章就介绍到这了,更多相关Vue组件继承用法内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！