web项目开发VUE的混入与继承原理
更新时间：2021年09月23日 15:39:39 作者：SpringSir
这篇文章主要介绍了web项目开发中VUE的混入与继承原理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
混入
- 将多个vue文件内重复使用的功能代码，提取成单个js文件，在需要使用的地方进行调用即可。
- 在一个js文件内定义一个对象, 在对象中可以写 vue文件内的 data 、methods、components等所有<script>中可以定义的代码。
混入注意(重名情况)
- 组件中的 data变量名 和 混入中的 data变量 名, 发生重名时, 以组件为准;
- 组件中的 methods，computed，wath名称 和 混入中的 methods，computed，wath名称 名, 发生重名时, 以组件为准;
- 组件中的 生命钩子函数 和 混入中的 生命钩子函数 名, 发生重名时, 都会执行, 但是组件中的钩子函数优先执行 ;
局部混入
全局混入
定义及全局注册
调用
继承
- 注意：这里是不适合多继承的，多继承问题出现会多。
- extends除了可以继承 .vue 文件，而且可以和 mixin一样使用 js文件内的对象。
- extends继承 .vue 文件内的 template内的html是无法继承的
混入和继承的区别
- 先看看官方文档的定义, 其实两个都可以理解为继承;
- mixins接收对象数组（可理解为多继承）;
- extends接收的是对象或函数（可理解为单继承）。
- 注意: 如果一个组件, 既使用 继承, 又使用 混入, 它们二者中如果有重名, 则混入会覆盖继承
以上就是web项目开发VUE的混入与继承原理的详细内容，更多关于web开发的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了详解Vue源码之数据的代理访问，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
vue-cli单页面预渲染seo-prerender-spa-plugin操作
这篇文章主要介绍了vue-cli单页面预渲染seo-prerender-spa-plugin操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Element-ui DatePicker显示周数的方法示例
这篇文章主要介绍了Element-ui DatePicker显示周数的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
vue3+ts项目之安装eslint、prettier和sass的详细过程
这篇文章主要介绍了vue3+ts项目02-安装eslint、prettier和sass的详细过程,在本文讲解中需要注意执行yarn format会自动格式化css、js、html、json还有markdown代码，需要的朋友可以参考下2023-10-10
el-form表单el-form-item label不换行问题及解决
这篇文章主要介绍了el-form表单el-form-item label不换行问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue2.0 事件的广播与接收(观察者模式)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
vue如何解决el-select下拉框显示ID不显示label问题
这篇文章主要介绍了vue如何解决el-select下拉框显示ID不显示label问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了详解Vue template 如何支持多个根结点，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
webpack+vue-cil 中proxyTable配置接口地址代理操作
这篇文章主要介绍了webpack+vue-cil 中proxyTable配置接口地址代理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue如何实现多组关键词对应高亮显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论