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开发的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue的混合继承详解

    目录 混合继承实现的效果: 一.继承 Vue.extend方法 ​extends 属性 二.混合(mixins) 合并规则 总结 混合继承实现的效果: A有一个data属性,和一个say方法 B有一个see方法和一个name属性 A继承B后,A除了有自己的一个data属性,和一个say方法,还有B的一个see方法和一个name属性 在C里混合AB后,C有自己的东西和A的一个data属性,和一个say方法,还有B的一个see方法和一个name属性 一.继承 Vue.extend方法 Vue.ext

  • 详细聊聊Vue的混入和继承

    详细聊聊Vue的混入和继承

    目录 前言 混入 混入注意(重名情况) 局部混入 全局混入 继承 混入和继承的区别 总结 前言 Vue中的混入(mixin)是一个比较简单的知识点.熟悉CSS预处理语言比如less.sass的开发者对mixin肯定很熟悉.Vue中的mixin几乎跟less等里面的mixin一样,都是将定义好的一些功能原样注入Vue组件当中,也有些类似面向对象编程中的继承(我只是说类似:) ). mixin是一个对象,这个对象的属性可以是Vue实例或者组件实例的生命周期钩子.属性等,当全局混入或者混入到组件后,V

  • 详解Vue2.0组件的继承与扩展

    前言 本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/extends和extend的用法. 一.slot 1.默认插槽和匿名插槽 slot用来获取组件中的原内容,此方式用于父组件向子组件传递"标签数据".有的时候为插槽提供默认的内容是很有用的,例如,一个<my-hello> 组件可能希望这个按钮的默认内容是"如果没有原内容,则显示该内容",但是同时允许用户覆写为别的内容. <body> <div id=&qu

  • web项目开发VUE的混入与继承原理

    web项目开发VUE的混入与继承原理

    目录 混入 混入注意(重名情况) 局部混入 全局混入 定义及全局注册 调用 继承 混入和继承的区别 混入 将多个vue文件内重复使用的功能代码,提取成单个js文件,在需要使用的地方进行调用即可. 在一个js文件内定义一个对象, 在对象中可以写 vue文件内的 data .methods.components等所有<script>中可以定义的代码. 混入注意(重名情况) 组件中的 data变量名 和 混入中的 data变量 名, 发生重名时, 以组件为准; 组件中的 methods,comput

  • web项目开发中2个Token原因解析及示例代码

    web项目开发中2个Token原因解析及示例代码

    目录 问题: 项目中2个Token, 一个时效2个小时(简称:短Token), 另一个时效14天(简称:长Token), 为什么要用2个Token? 解答: 1.基于安全性, 防止Token泄露的考虑, 服务器资源中所有的请求都只能使用短Token, 并且短Token只有2小时时效; 这个方法依然无法完全解决防止Token泄露的问题, 只是在一定程度上提高防止Token泄露的安全性; 长Token的作用只有一个, 就是短Token时效了的时候, 用长Token去请求获取新的短Token, 只有这

  • 尤雨溪开发vue dev server理解vite原理

    尤雨溪开发vue dev server理解vite原理

    目录 1.引言 2. vue-dev-server 它的原理是什么 3. 准备工作 3.1 克隆项目 3.2 test 文件夹 3.3 vue-dev-server.js 3.4 用 VSCode 调试项目 4. vueMiddleware 源码 4.1 有无 vueMiddleware 中间件对比 4.2 vueMiddleware 中间件概览 4.3 对 .vue 结尾的文件进行处理 4.3.1 bundleSFC 编译单文件组件 4.3.2 readSource 读取文件资源 4.4 对

  • Python Web项目Cherrypy使用方法镜像

    1.介绍 搭建Java Web项目,需要Tomcat服务器才能进行.而搭建Python Web项目,因为cherrypy自带服务器,所以只需要下载该模块就能进行Web项目开发. 2.最基本用法 实现功能:访问html页面,点击按钮后接收后台py返回的值 html页面(test_cherry.html) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tes

  • 详解使用Spring Boot开发Web项目

    详解使用Spring Boot开发Web项目

    前面两篇博客中我们简单介绍了spring Boot项目的创建.并且也带小伙伴们来DIY了一个Spring Boot自动配置功能,那么这些东西说到底最终还是要回归到Web上才能体现出它的更大的价值,so,今天我们就来看一下如何使用Spring Boot来开发Web项目.当然,如果小伙伴对Spring Boot尚不熟悉的话,可以先参考一下这两篇博客: 1.初识Spring Boot框架 2.初识Spring Boot框架(二)之DIY一个Spring Boot的自动配置 Spring Boot 提供

  • vue多页面项目开发实战指南

    目录 单页应用和多页应用 单页应用 多页应用 优缺点 配置多页应用 1. 修改vue.config.js 2. 修改title 3. 合并第三方库 4. 打包第三方scss 5. 其它常见设置 总结 单页应用和多页应用 单页应用 SPA(single page application): 单页面应用,即一个web项目就只有一个页面(即一个HTML文件). 就是把整个项目的所有页面的所有内容分成了很多的小块(就是组件),可以重复利用的,可以任意调整的组件,每个组件就是一个独立的部分(包括html,

  • node vue项目开发之前后端分离实战记录

    前言 本文主要介绍了关于node vue前后端分离的相关资料,分享出来供大家参考学习,下面随着小编来一起学习学习吧. node vue项目开发 最近看了近一周的vue开发,有诸多感触,我之前接触过react.angular所以特别想学学久仰大名的vue.学习半天以后发现,接触到的东西多了,学习起来就是容易很多,vue的指令我能个联想到angular的指令,vue组件化设计类似于react的组件化设计,包括一些router的设置跟react里的路由或者nodejs里的路由都差不多,vuex更是根据

  • Java开发之普通web项目转为Maven项目的方法

    Java开发之普通web项目转为Maven项目的方法

    前言 Maven是基于项目对象模型(Project Object Model),可以通过一小段描述信息来管理项目的构建.报告和文档的项目管理工具,提供了一个仓库的概念,统一管理项目所依赖的第三方jar包,最大可能避免了由于环境变量的不同在不同电脑之间无法运行的问题,Struts2.Hibernate都是采用maven部署的项目. 现在网上有许多普通web项目转换为maven项目的博文,但由于项目的不同,所需的步骤及必须的转换步骤也不同.因此,本文章将以一个基于SpringMVC,Spring,H

  • webpack vue项目开发环境局域网访问方法

    思路:将自己的项目启动ip与端口固定,当然端口也可以为默认的8080 步骤: 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录,在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例:comfig/index.js host:'http://192.168.2.153',//一定要加上 http port:3000 注意:此处ip一旦固定,本机访问的或localhost将不可

随机推荐