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创建项目使用vue-router和vuex报错Object(...)is not a function

    解决vue创建项目使用vue-router和vuex报错Object(...)is not a&nb

    这篇文章主要介绍了解决vue创建项目使用vue-router和vuex报错Object(...)is not a function问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • Vue.use源码学习小结

    Vue.use源码学习小结

    这篇文章主要介绍了Vue.use源码学习小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue中Element的table多选表格如何实现单选

    Vue中Element的table多选表格如何实现单选

    这篇文章主要介绍了Vue中Element的table多选表格如何实现单选,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue中渲染系统模块的实现详解

    Vue中渲染系统模块的实现详解

    想要实现一个简洁版的Mini-Vue框架,应该包含三个模块:分别是:渲染系统模块、可响应式系统模块、应用程序入库模块,本文主要介绍的是渲染系统模块的实现,需要的可以参考一下
    2023-07-07
  • vue实现大文件切片断点续传

    vue实现大文件切片断点续传

    上传文件,基本上用了input框就可以解决,但大文件应该怎样上传呢,一次性上传明显不现实,因为每次一断网,那就会从头开始上传,所以切片势在必行,关键就是如何切,怎么保障文件数据不会丢失,同时优化上传保障机制,本文就来给大家讲讲如何上传大文件
    2023-07-07
  • 一起写一个即插即用的Vue Loading插件实现

    一起写一个即插即用的Vue Loading插件实现

    这篇文章主要介绍了一起写一个即插即用的Vue Loading插件实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 解决cordova+vue 项目打包成APK应用遇到的问题

    解决cordova+vue 项目打包成APK应用遇到的问题

    这篇文章主要介绍了解决cordova+vue 项目打包成APK应用遇到的问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue3中如何使用component :is 加载组件

    Vue3中如何使用component :is 加载组件

    Monaco-editor,一个vs code 编辑器,需要将其集成到项目,这篇文章主要介绍了Vue3中如何使用component :is 加载组件,需要的朋友可以参考下
    2023-11-11
  • 解决vux 中popup 组件Mask 遮罩在最上层的问题

    解决vux 中popup 组件Mask 遮罩在最上层的问题

    这篇文章主要介绍了解决vux 中popup 组件Mask 遮罩在最上层的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue之关于Eslint自动加分号的问题及解决

    Vue之关于Eslint自动加分号的问题及解决

    这篇文章主要介绍了Vue之关于Eslint自动加分号的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06

最新评论