Vue3双向绑定的坑坑死人了

1.1 vue 3 的v-model使用原理：

<child-comp v-model="msg" /> //可翻译为
<child-comp :modelValue="msg" @update:modelValue="msg=$event" />

单个数据双向绑定完整示例

//父组件代码
<child-comp v-model="name" />子组件代码：
<template><input type="text" v-model="newValue">
</template><script>
export default {props:{modelValue:{type:String,default:''}},computed:{newValue:{get:function(){return this.modelValue},set:function(value){this.$emit('update:modelValue',value)}}}
}
</script>

vue3 使用特定的 modelValue ，避免 value 的占用，通过 update:modelValue 实现数据双向绑定。值得注意的是，vue3 移除了 model 选项。

1.2、多个 v-model 使用

在 vue3 一个组件可以使用多个 v-model ，统一了 vue2 的 v-model 和 .sync 修饰符。

使用原理：

<child-comp v-model:name="name" v-model:age="age" /> //可翻译为
<child-comp :name="name" @update:name="name=$event":age="age" @update:age="age=$event" />

实现多个数据双向绑定完整实例：

//父组件代码
<child-comp v-model:name="name" v-model:age="age" /> //子组件代码
<template><div><input type="text" v-model="newName"><input type="text" v-model="newAge"></div>
</template>
<script>
export default {props:{name:{type:String,default:''},age:{type:String,default:""}},emits:['update:name','update:age'],computed:{newName:{get:function(){return this.name},set:function(value){this.$emit('update:name',value)}},newAge:{get:function(){return this.age},set:function(value){this.$emit('update:age',value)}}}
}
</script>

需要注意的是 script 中多了一个 emits 选项，你发现了吗？

vue3 组件的自定义事件需要定义在 emits 选项中，只要是自定义事件，就需要添加在 emits 中，否则会有警告。它的优点：

如果与原生事件相同名时，事件就会被触发两次，如果在 emits 选项中加入时，当作自定义事件处理，只会触发一次。
更好地指示组件的工作方式。
可以校验对象形式的事件。

作者：前端人_倩倩
链接：https://juejin.cn/post/7025773427260653599
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Vue3双向绑定的坑坑死人了相关推荐

vue双向绑定是如何实现的
双向绑定 Vue 的双向绑定是通过数据劫持和发布-订阅模式实现的. 当 Vue 实例初始化时,它会对 data 选项中的每个属性使用 Object.defineProperty()方法进行数据劫持.这 ...
vue组件双向绑定.sync修饰符的一个坑
我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...
VUE 入坑系列一双向绑定
html代码 <div id="app"><p>{{message}}</p><span>message1</span> ...
数据双向绑定_手写 Vue3 数据双向绑定理解Proxy
前言 vue3的 Proxy 最近貌似各大网红公众号都有发,我也来蹭蹭热度写一篇吧!我们也可以结合vue2来看看vue3到底发生了些什么变化,又解决了Vue2.x的哪些痛点.接下来我们一起看看~ 目录 ...
vue2.0,vue3.0 v-model数据双向绑定
vue2.0,vue3.0 v-model数据双向绑定 vue.2.0 vue2.0 vue-property-decorator vue3.0 vue.2.0 <base-checkbox v ...
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...
02.Vue3 基础语法：常用语法、列表渲染、事件绑定和表单双向绑定
Vue3 基础语法 1. Vue 中应用和组件的基础概念 createApp createApp 表示创建一个 Vue 应用,存储在 app 变量中. 传入的参数表示,这个应用最外层的组件,应该如何展 ...
vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据，动态校验规则】
vue3 ant design vue项目实战--Form表单[v-model双向绑定数据实现form表单数据的提交] 上期文章回顾[UI界面渲染] 场景复现(源代码附在文章最后) 实现需求 1.表单 ...
Vue数据双向绑定原理（vue2向vue3的过渡）
众所周知,Vue的两大重要概念: 数据驱动组件系统接下来我们浅析数据双向绑定的原理一.vue2 1.认识defineProperty vue2中的双向绑定是基于defineProperty的ge ...

Vue3双向绑定的坑坑死人了

Vue3双向绑定的坑坑死人了相关推荐

最新文章

热门文章

Vue3双向绑定的坑 坑死人了

Vue3双向绑定的坑 坑死人了相关推荐

最新文章

热门文章

Vue3双向绑定的坑坑死人了

Vue3双向绑定的坑坑死人了相关推荐