vue3.x自定义组件双向数据绑定v-model
vue2.x 语法
在 2.x 中,在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件:
<ChildComponent v-model="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />
子组件内props里面value接收传进来的值,然后使用this.$emit('input', '***')来改变外部对象的值
vue3.x 语法
在 Vue 3 中,双向数据绑定的 API 已经标准化,以减少开发者在使用 v-model 指令时的混淆,并且更加灵活。
Vue 3 中自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件:
<ChildComponent v-model="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event"/>
子组件内props里面modelValue接收传进来的值,然后使用this.$emit('update:modelValue', '***')来改变外部对象的值
子组件部分实现:
// ChildComponent.vue
export default {
props: {
modelValue: String // 以前是`value:String`
},
methods: {
changeModelValue(value) {
this.$emit('update:modelValue', value) // 以前是 `this.$emit('input', title)`
}
}
}
此外:
若需要更改 model 的名称,现在我们可以为 v-model 传递一个参数,以作为组件内 model 选项的替代:
<ChildComponent v-model:title="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
这样我们可以很方便的定义多个双休绑定,并且在高阶封装的时候能更好的使用$attrs来向下传递各种不同的v-model。
vue3.x自定义组件双向数据绑定v-model的更多相关文章
- Vue - 自定义组件双向绑定
前言 无论在任何的语言或框架中,我们都提倡代码的复用性.对于Vue来说也是如此,相同的代码逻辑会被封装成组件,除了复用之外,更重要的是统一管理提高开发效率.我真就接手过一个项目,多个页面都会用到的列表 ...
- vue3.0中的双向数据绑定方法
熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.definePrope ...
- Vue父子组件双向数据绑定
[本文出自天外归云的博客园] 简介 Vue版本:2.9.6 Element版本:2.4.8 问题描述:子组件对Element中el-select进行封装,父组件中把选中的值selected和所有选项o ...
- 聊聊 Vue 的双向数据绑定,Model 如何改变 View,View 又是如何改变 Model 的
todo defineProperty() 参考: https://www.cnblogs.com/wangjiachen666/p/9883916.html
- Vue组件的操作-自定义组件,动态组件,递归组件
作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件.v-model指 ...
- React(6) --双向数据绑定及列表数据循环
React双向数据绑定:model改变影响view,view改变反过来影响model import React,{Component} from 'react'; class Todolist ext ...
- Vue之双向数据绑定
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- angular4自定义组件非input元素实现ngModel双向数据绑定
在angular里我们一般都是给input元素添加[(ngModel)]="value"实现数据双向绑定,如果想实现自定义的组件上实现ngModel双向数据绑定应该怎么办呐... ...
- Angular自定义组件实现数据双向数据绑定
学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么自定义组件能不能实现双向数据绑定呢?答案是肯定的. Angular中,我们常常需要通过方括号[]和圆括号()实现组 ...
随机推荐
- elasticsearch支持大table格式数据的搜索
一.问题源起 数据情况 TableMeta, 保存table的元数据,通过fileId关联具体的GridFS文件: id name creator fileId 1 table1 mango f1 2 ...
- Java最大栈深度有多大?-从一道面试题开始学习JVM
一.问题:Java最大支持栈深度有多大? 1.分析 有JVM的内存结构我们可知: 随着线程栈的大小越大,能够支持越多的方法调用,也即是能够存储更多的栈帧: 局部变量表内容越多,那么栈帧就越大,栈深度就 ...
- Redis详解(三)——
redis https://www.cnblogs.com/zhangyinhua/p/14504717.html
- 如何高效掌控K8s资源变化?K8s Informer实现机制浅析
作者 王成,腾讯云研发工程师,Kubernetes contributor,从事数据库产品容器化.资源管控等工作,关注 Kubernetes.Go.云原生领域. 概述 进入 K8s 的世界,会发现有很 ...
- Java XXE漏洞典型场景分析
本文首发于oppo安全应急响应中心: https://mp.weixin.qq.com/s?__biz=MzUyNzc4Mzk3MQ==&mid=2247485488&idx=1&am ...
- call、apply、bind三者比较
var obj={a:1}; var foo={ getA:function(item1,item2){ return this.a+item1+item2 } } // apply绑定参数为数组,一 ...
- go中如果想要实现别人写的接口,如何保证确实实现了那个接口而不是错过了什么?
在类型的实现方法上定义通用代码指令 var _ 要实现的接口 = (receiver类型)(nil) 比如要定义一个web处理程序 type handler_def struct{} var _ ...
- Vue项目中应用TypeScript
一.前言 与如何在React项目中应用TypeScript类似 在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, 其是基于vue-class-c ...
- webrtc源码阅读理解一
webrtc是一个比较成熟的实时音视频处理开源项目,一上来老大就扔给我一本webrtc native实践,虽然狠下心"翻"完了一遍,但是还是云里雾里的,在经过几个月的摸索之后,我大 ...
- 进入vim /etc/profile如何退出
按o或i输入 按Esc,输入:wq,退出