组件的v-model Mixin extends
一、组件的v-model
前面我们在input中可以使用v-model来完成双向绑定:
- 这个时候往往会非常方便,因为v-model默认帮助我们完成了两件事;
- v-bind:value的数据绑定 和 @input的事件监听;
如果我们现在封装了一个组件,其他地方在使用这个组件时,是否也可以使用v-model来同时完成这两个功能呢?
- 也是可以的,vue也支持在组件上使用v-model;
当我们在组件上使用的时候,等价于如下的操作:
- 我们会发现和input元素不同的只是属性的名称和事件触发的名称而已;
二、组件v-model的实现
那么,为了我们的MyInput组件可以正常的工作,这个组件内的 <input>
必须:
- 将其 value attribute 绑定到一个名叫 modelValue 的 prop 上;
- 在其 input 事件被触发时,将新的值通过自定义的 update:modelValue 事件抛出;
三、computed实现
我们依然希望在组件内部按照双向绑定的做法去完成,应该如何操作呢?我们可以使用计算属性的setter和getter来完成。
四、绑定多个属性
我们现在通过v-model是直接绑定了一个属性,如果我们希望绑定多个属性呢? p也就是我们希望在一个组件上使用多个v-model是否可以实现呢?
- 我们知道,默认情况下的v-model其实是绑定了 modelValue 属性和 @update:modelValue的事件;
- 如果我们希望绑定更多,可以给v-model传入一个参数,那么这个参数的名称就是我们绑定属性的名称;
注意:这里我是绑定了两个属性的
v-model:title相当于做了两件事:
- 绑定了title属性;
- 监听了 @update:title的事件;
五、认识Mixin
目前我们是使用组件化的方式在开发整个Vue的应用程序,但是组件和组件之间有时候会存在相同的代码逻辑,我们希望对相同的代码逻辑进行抽取。
在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成:
- Mixin提供了一种非常灵活的方式,来分发Vue组件中的可复用功能;
- 一个Mixin对象可以包含任何组件选项;
- 当组件使用Mixin对象时,所有Mixin对象的选项将被 混合 进入该组件本身的选项中;
六、Mixin的基本使用
七、Mixin的合并规则
如果Mixin对象中的选项和组件对象中的选项发生了冲突,那么Vue会如何操作呢?
p这里分成不同的情况来进行处理;
1.情况一:如果是data函数的返回值对象
- 返回值对象默认情况下会进行合并;
- 如果data返回值对象的属性发生了冲突,那么会保留组件自身的数据;
2.情况二:如何生命周期钩子函数
- 生命周期的钩子函数会被合并到数组中,都会被调用;
3.情况三:值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。
- 比如都有methods选项,并且都定义了方法,那么它们都会生效;
- 但是如果对象的key相同,那么会取组件对象的键值对;
八、全局混入Mixin
如果组件中的某些选项,是所有的组件都需要拥有的,那么这个时候我们可以使用全局的mixin:
- 全局的Mixin可以使用 应用app的方法 mixin 来完成注册;
- 一旦注册,那么全局混入的选项将会影响每一个组件
九、extends
另外一个类似于Mixin的方式是通过extends属性: 允许声明扩展另外一个组件,类似于Mixins;
在开发中extends用的非常少,在Vue2中比较推荐大家使用Mixin,而在Vue3中推荐使用Composition API
组件的v-model Mixin extends相关推荐
- php继承exten,es6,extends_react中通过extend继承,父组件为什么能访问子组件的属性,es6,extends,react.js - phpStudy...
react中通过extend继承,父组件为什么能访问子组件的属性 代码如下,在父类的componentWillMount方法中输出 this,打印的却是子类 item 通过webpack的编译后文件中 ...
- 什么是V Model(V模型)
v-model是一种软件生存期模型,由Paul Rook在1980年率先提出的,在1990年出现在英国国家计算中心的出版物中,旨在提高软件开发的效率和有效性,是我们熟知的瀑布模型的一种改进,瀑布模型( ...
- vue组件通信v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: 1 <tem ...
- vue中mixin 感觉很牛逼(父子组件融合成一个新组件)
vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引 ...
- vue2的动画,混入Mixin,插件,指令,渲染函数,响应式,MVVM
文章目录 过渡 & 动画 Transition 组件 基于 CSS 的过渡效果 CSS 过渡类名 class 为过渡效果命名 CSS 过渡 transition 实例1: 实例2: CSS 动 ...
- Java Web编程的主要组件技术——MVC设计模式
参考书籍:<J2EE开源编程精要15讲> MVC(Model View Controller),Model(模型)表示业务逻辑层,View(视图)代表表述层,Controller(控制)表 ...
- Android之四大组件(Service的开启与关闭)
个人开发的微信小程序,目前功能是书籍推荐,后续会完善一些新功能,希望大家多多支持! 前言 服务(Service)是Android系统中的四大组件之一.服务主要用于两个目的:后台运行和跨进程访问.通过启 ...
- Model/View 教程
说明:这篇博客基本都是翻译于Qt官方的Model/View Tutorial教程,无法理解的地方建议转到原文,同时,由于译者水平有限,如有差错欢迎指出. 原文:http://qt-project ...
- 关于DPM(Deformable Part Model)算法中模型可视化的解释
搭建了自己的博客平台,本文地址:http://masikkk.com/blog/DPM-model-visualization/ DPM源代码(voc-release)中的模型可视化做的还算相当炫酷的 ...
最新文章
- Android 补间动画(Tween Animation)
- 第五课.Python函数(二)
- 腾讯张正友:计算机视觉的三生三世
- offsetLeft和style.left的区别
- linux运维防火墙考题,Linux运维工程师:30道面试题整理 | 张戈博客
- Oracle 查看sql语句执行计划方法
- matlab错误:Variable 'a' cannot be saved to a MAT-file whose version is older than 7.3.
- JAVA中的线程安全与非线程安全
- EF Code First 学习笔记:关系(转)
- 基于Passthru的NDIS开发的个人理解
- 【POJ - 1330】Nearest Common Ancestors(lca,模板题)
- 使用Mybatis Generator结合Ant脚本快速自动生成Model、Mapper等文件的方法
- Ubuntu安装VMware Workstation详解
- 触控屏c语言程序,TouchWin编程软件下载_TouchWin触摸屏软件下载 2.D.2c 官网版_当载软件站...
- linux文件重定向用什么命令实现,Linux基础:文件描述符与重定向
- NVMe驱动解析-前言
- [分享].Net脱壳利器de4dot介绍
- 电脑连接安卓手机摄像头的方法(含DroidCam安装包及简明使用教程)
- linux 指令tftp传输文件_tftp命令怎么传输文件,tftp命令怎么传输文件具体操作方法?...
- 科学计算机调成了fx,科学计算器怎么编程
热门文章
- 学成在线--20.新增课程(最后完善)
- java ejb jsp 架构_JavaEE架构
- 【技术+某度面经】Jenkins 内容+百度面经分享
- aix oracle 10.2.0.1 升级 10.2.0.4,AIX Oracle RAC 升级到10.2.0.4.0要特别注意的问题 - 爱肯的专栏 ......
- mysql 单标递归_MySql8 WITH RECURSIVE递归查询父子集的方法
- Python3.10 结构化模式匹配 PEP 634
- Qt 串口类QSerialPort 使用笔记
- C++动态绑定及返回类型协变
- html总结:文本框填满表格
- [POJ3252]Round Number(数位dp)