v-model的原理和其在vue3中针对自定义组件的用法

最新推荐文章于 2024-06-24 09:19:32 发布
最新推荐文章于 2024-06-24 09:19:32 发布
阅读量423 收藏 1
点赞数 7
文章标签： 前端框架 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63265165/article/details/134129911
版权

众所周知v-model是组件传入值和监听input事件改值操作的语法糖，对于双向绑定的实现，让我们使用起来非常方便

以下是通过原理实现双向绑定

c6aee0494cc64a8689ce65c6917ebb2c.png

 9fd9490370df48aabb5f27109dfb55f1.png

 52d2808f61004caf949858834e772752.png

 对于一般组件来说，vue2和vue3使用v-model都是用于实现双向绑定，原理就是一个input监听

但v-model的能力远不止如此，尽人皆知，vue在进行子向父传值时可谓相当繁琐，那v-model对于自定义组件的使用，就针对这一点，做了较大的优化

对于vue3自定义组件来说，v-model实质上是给组件绑定了一个modelValue的值，用来做props传值，且附带一个监听事件，update：modelValue，说到这可能还有点难以理解，用代码实现便一目了然

这里用来完成一个工作中常用的功能——弹窗

地球人都知道，子组件弹窗开关就要涉及到父子传值，原生方法相当复杂，这里用v-model进行操作

首先，创建内容，父组件为按钮，子组件是一个带有取消按钮的弹窗，对于弹窗的逻辑，就是简单的显隐，定义变量“popshow”用来存放状态

6acc501bd17f4a1bbadb47076056cd22.png

 这样便实现了弹窗的显示，但为了功能不分离，可以将显隐完全交给子组件内部完成

对于弹窗操作，可以利用子向父传值的方式，传入props，触发emit一套流程，而v-model的优势，便体现了出来，我们用v-model相当于传入了modelValue属性，又增加了一个update：modelValue监听

5e9d0dcb2fae4b69828394d363e55ae9.png

 同时，在子组件中，引入props和emit，引入的props用来判断div的display状态

6f542d303e8847a6859a3ba78ff1ddf2.png

 这样就实现了一个弹窗效果，父组件中的v-model可以写为

6a2f09544e934bc7a20a0da6547e75c4.png

 v-model的传值也可以自定义，对于多和v-model作用于同一个子组件时，就可以给v-model命名

f092a41b0c624a1baa936ec6155eb024.png

 相当于传给子组件的参数为“popshow”

同时要在子组件中对props和emit更改

d822f88b986c452f8d7a6ab127d37258.png

 只要把modelValue更改成需要替换的值就可以

以上就是v-model在vue3自定义组件中的应用😜

SHENQING469
关注
  • 7
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3 自定义 v-model（无参数和带参数）【setup版】（两种方案）
朝阳39的博客
06-05 1423
子组件 Child.vue;const;</</父组件importfrom"vue";importfrom;constref"";</</</
vue3实现v-model原理详解
10-16
主要介绍了vue3实现v-model原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
如何在Vue3中创建和使用一个简单的自定义组件
最新发布
有我更精彩的博客
06-24 1547
props: {title: {},message: {},methods: {');</script></style>创建完组件后，我们需要在主应用中使用它。在文件中，导入并注册自定义组件，然后使用该组件。以下是App.vue<template></div><script>
3.Vue3——自定义组件
2401_82986110的博客
05-10 1766
什么是组件？h1就是一个组件，就是标签，一个组件具备：组件本身即标签+属性+事件，属性用来提供数据，事件用来提供功能，事件的实现通过组件事先提前封装写好方法。所以，如何写一个简单的组件呢？写一个标签完善该标签的属性和方法，对外提供。——属性props接受外部传入数据 emit向外部传出事件，2者都需要先注册再使用。有些内容是待定的，你只需要固定它的位置，比如一个古诗组件，标题等等都是需要使用时填入，这个时候就需要——使用插槽实现 案例1：自定义面板 vue组件的生命周期可以分为：创建，挂载，销毁
vue3 自定义组件v-model
weixin_46694059的博客
02-08 3225
vue3 自定义组件 v-model 双向绑定
Vue3.js：自定义组件 v-model
彭世瑜的博客
10-17 860
Vue3的自定义`v-model`和vue2稍有不同
vue3笔记：自定义组件
weixin_45921387的博客
03-04 5813
defineProps()，IProps可以给props设置类型，withDefaults的第二个参数支持给props设置默认值
vue在自定义组件中使用v-model进行数据绑定的方法
10-17
主要介绍了vue在自定义组件中使用v-model进行数据绑定的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue.js自定义组件实现v-model双向数据绑定的示例代码
01-19
我们都清楚v-model其实就是vue的一个语法糖，用于在表单控件或者组件上创建双向绑定。 //表单控件上使用v-model <input type=text v-model=name /> <input type=checkbox v-model=checked/> <!-...
利用vue组件自定义v-model实现一个Tab组件方法示例
08-28
如果我们想在一个自定义组件<Tab v-model="tab">中使用v-model，我们需要做以下几步： 1. **接收v-model的值**：在组件的props中定义一个名为`value`的属性，类型为String，用于接收v-model传递的数据。 ```...
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
08-28
Vue 自定义组件 v-model 双向绑定、父子组件同步通信的多种写法 在 Vue 中，父子组件通信通常是单项的，但是在实际开发中，我们经常需要双向通信。因此，本文将介绍 Vue 自定义组件 v-model 双向绑定、父子组件同步...
Vue--》Vue3自定义组件以及新组件的使用讲解
ztK63LrD的博客
01-07 2561
在Vue3中不止语法进行了一定的修缮，而且出现了一些，Vue不存 通过自定义ref，可以很方便的对其中的某些具体实现流程进行一定控制，实现一些特殊的效果。还有一些组合式API就不再提及，需求者可自行去官网查看。在Vue3中不止语法进行了一定的修缮，而且出现了一些，Vue不存在的新的组件，举几个常年的组件进行讲解，如下：在Vue2中，组件必须有一个根组件，而在Vue3中组件可以没有根组件，内部会将多个标签包含在一个Fragment虚拟元素中。减少了标签层级，减少了内存使用。Teleport是一种能够将我们
vue3：自定义组件使用v-model
1111111111
04-19 738
首先，在自定义组件里，得有一个名为modelValue的属性，当modelValue变化的时候，触发update:modelValue事件，把新值传给父组件。父组件调用子组件，特别注意，这里不需要@update之类的了。组合式API写法，modelValue前面要加props。
vue3自定义组件使用v-model方式
weixin_43860703的博客
12-05 1274
在Vue3中，我们可以使用v-model指令在自定义组件中实现双向数据绑定。这篇文章将介绍如何在Vue3中自定义组件并使用v-model方式。
vue3.0 实现自定义组件v-model
addction的博客
03-14 437
vue3.0 实现自定义组件双向绑定v-model
Vue3专栏项目 -- 二、自定义Form组件（上）
m0_64931189的博客
05-09 1063
说到表单我们就不得不提到验证，我们需要过滤掉一系列方法的输入，最早的时候这个功能一般是在服务器端完成，假如有错误服务器会返回并且渲染一些错误，这样做费时费力，所以说在现在的web应用中，表单一般会在前端进行验证，它会适时的展示用户的问题，当没问题时就发送请求，然后后端再验证一次，我们现在还没有接入后端，所以不需要考虑点击提交以后和后端的交互功能，而是只有一个关注点，那就是表单验证。所谓表单验证是表单世界里前端最重要的一个功能，将表单验证的功能封装好也算是一个难点，接下来我们来一步步完成这个任务。
vue3学习教程第三节(v-model 执行原理)
weixin_39593730的博客
02-27 1196
vue 中 v-model执行原理以及使用注意事项说明
vue3.0 v-model自定义组件实现,回顾vue2.x v-model
weixin_41579185的博客
11-12 1074
vue2.x v-model 语法糖 model: 默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event 但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。 默认状态下 model: { prop: 'value', event: 'change' } vue3.0 v-model 语法糖 <my-component v-model="fool"
vue中的v-model原理,与组件自定义v-model详解
11-29
在上述代码中，父组件中使用了自定义组件CustomInput，并将父组件中的message数据通过v-model绑定到CustomInput组件中。在CustomInput组件中，使用props属性接收父组件传递的数据，并在input元素上使用:value绑定...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值