vue中Mixin和extends详解
一、认识Mixin
目前我们使用组件化开发方式来开发应用程序,但是在不同组件之间存在一些相同的代码逻辑,此时我们希望对相同的代码逻辑
进行抽取。
在vue2和vue3中都支持使用Mixin来解决,Mixin提供了一种非常灵活的方式,来分发Vue组件中的可复用功能,一个Mixin对
象可以包含任何组件选项,当组件使用Mixin对象时,所有Mixin对象的选项将被 混合 进入该组件本身的选项中。
二、Mixin的基本使用
如图所示,上述代码中设定了两个mixin
,并且将其全部在App.vue
选项中进行配置。
三、mixin的合并规则
一、如果是data中返回的对象的属性相同,则会以该组件的值为准。
二、如果为生命周期钩子函数,则都会被调用。
三、像methods,components和directive这些对象,将会合并成一个对象,如果在key不一样的情况下,都会执行,但是当key一样的时候,只会执行当前组件中的内容。
四、全局混入Mixin
五、extends
extends
类似于mixin
,相当于继承,但是只是继承options Api
中的内容,不继承template
模板。
vue中Mixin和extends详解相关推荐
- keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处 在做电商有关的项目中 ...
- Vue 中的 ref 属性详解
Vue 中的 ref 属性详解 我们先来读一下vue的官方文档 我们来分析官方文档 首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
- Vue中process.env.NODE_ENV详解
一文弄懂如何在 Vue 中配置 process.env.NODE_ENV 最近在研习 vue.config.js 文件,发现一行,甚是费解. process.env.NODE_ENV 查阅资料后,发现 ...
- 【CSDN软件工程师能力认证学习精选】Vue 中的事件处理机制详解
CSDN软件工程师能力认证(以下简称C系列认证)是由中国软件开发者网CSDN制定并推出的一个能力认证标准.C系列认证历经近一年的实际线下调研.考察.迭代.测试,并梳理出软件工程师开发过程中所需的各项技 ...
- Vue中created和mounted详解
目录 一.生命周期概念 二.浏览器渲染过程 三.生命周期中的浏览器渲染 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段 四.使用场景 五.常见相关问题 ...
- Vue 中的 Render 全面详解 (渲染函数 JSX)
相信大家都或多或少的在 code 中见过 或使用过 Render,如果你对它还是一脸懵逼,那就快上车!今天就带你来盘它.附 Element 表格自定义全选示例. 文章目录 一.Render 的资料简介 ...
- Vue中keep-alive的使用详解
1.概念: keep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁. 2.作用: 用来缓存组件,避免多次加载相同的组件,减少性能消耗,提高用户体验. 3.使用方 ...
- VUE中 ref $refs 使用详解,扩展到$parent 、$children 的使用
$refs 的使用方法就是在元素或组件标签上添加ref属性指定一个引用信息,引用信息将会注册在父组件的$refs对象上,在js中使用$refs来指向DOM元素或组件实例: 应用一:在DOM元素上使用$ ...
- java 继承 extends_java中的继承 (extends) 详解
继承(extends) 1. 父类与子类 父类也叫基类.超类 子类也叫派生类 在继承的而关系中,"子类就是一个父类".也就是说,子类可以被当做父类来看待.例如父类是员工,子类是 ...
最新文章
- 仍在警告:配置“编译”已过时,并已由“实现”代替
- 020_Jedis的Set数据类型
- 手写html基础格式,手写服务器_HTML 简单入门知识
- techempower之Plaintext上7百万RPS
- 利用Jqurey写一个输入内容增加并且可以删除,上下移动的标签
- 潘石屹接连带货 Python,要来抢我们的饭碗?
- 初窥R(基本说明、获取帮助、工作空间、输入输出、包)
- Ajax网络超时和和网络异常
- asp.net三种方法实现事务
- android怎么看错误日志,android运行错误日志帮看下 不懂啊
- CenturyLink设定NG-PON2部署阶段 业务、无线回程为初始服务目标
- 优惠券如何引流,如何做好优惠券推广,优惠券正确引流方法
- 微软操作系统 Windows Server 2012 R2 官方原版镜像
- Jeecg-Boot 使用技巧
- 解决wampserver server offline
- android系统与苹果手机号码,苹果手机号码怎么导入另一个手机安卓(全程图解其操作流程)...
- java中nextToken,Java StringTokenizer nextToken()用法及代碼示例
- 《必然》 一书中120条书摘
- 【白苹果系统镜像】macOS Big Sur 11.6.6正式版(20G608)镜像
- rhel6 中安装使用finger命令