vue3_硅谷甄选_v-model实现父子组件数据同步

已于 2024-08-25 01:49:33 修改
阅读量72 收藏 6
点赞数 3
分类专栏： # 硅谷甄选 文章标签： vue.js 前端 javascript
于 2024-08-25 01:40:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41748874/article/details/141508081
版权

文章目录


image-20240824154633065

v-model大家一看到，都以为这是收集表单数据。

v-model可以实现组件之间的通信，场景：父子组件的数据同步；

v-model：收集表单数据，实现数据双向绑定

image-20240824235533411

image-20240824235624597

以上是使用v-model收集表单数据的做法；

不用v-model的父子组件数据同步

父亲给儿子数据，使用props；

儿子给父亲数据，使用自定义事件；

image-20240825011558118

定义子组件；

image-20240825011646887

image-20240825011655284

在父组件当中引入子组件；

image-20240825011955668

image-20240825011857736

image-20240825012012075

从父亲给儿子，传递数据；

image-20240825012312867

image-20240825012350096

image-20240825012639943

image-20240825012713335

看控制台，这说明自定义事件，父亲是可以接收到的；

image-20240825012817871

image-20240825012826518

这样就实现了父子组件的数据同步；

总结父子组件数据同步

  • 父亲有个数据money（这就是响应式数据；）
  • 父亲通过props将money传递给了儿子，儿子通过defineProps接收这个数据，并且渲染在页面上；
  • 儿子上面有一个按钮，点击按钮就出发了自定义事件，自定义事件将props传递的数据更新，并且传递给父亲
  • 父亲通过捕获自定义事件，接收儿子传递的更新后的数据，然后更新money。

利用props和自定义事件实现父子组件数据同步；

v-model: 父子组件数据同步

image-20240825013143273

这就是特别简单了。

解释v-model父子组件同步

image-20240825013433593

v-model在组件身上使用，

相当于给子组件传递了一个props，名字就是叫做props[modelValue]

image-20240825013302083

同时，相当于给子组件绑定了一个自定义事件，名字就是叫做update:modelValue；

vue2当中v-model绑定的props是value，绑定的事件是input；

vue3给vue2做了一点变化；

子组件身上可以绑定多个v-model

image-20240825014108494

image-20240825014139151

image-20240825014350095

image-20240825014359399

vue3当中是可以子组件绑定多个，v-model的。

vue2当中是做不到这一点的；

这种语法有什么用

element-plus这种ui组件库，这里面就用到了这种v-model语法。

image-20240825014709734

image-20240825014723463

相当于给子组件传递了props叫做currrent-page；

相当于给子组件绑定了自定义事件update:current-page；

codelyq
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
硅谷甄选运营平台-vue3组件通信方式
qq_47296476的博客
07-09 438
在vue框架中事件分为两种:一种是原生的DOM事件，另外一种自定义事件。原生DOM事件可以让用户与网页进行交互，比如click、dbclick、change、mouseenter、mouseleave....自定义事件可以实现子组件给父组件传递数据自定义事件可以实现子组件给父组件传递数据.在项目中是比较常用的。比如在父组件内部给子组件(Event2)绑定一个自定义事件在Event2子组件内部触发这个自定义事件我是子组件2
项目准备知识---vue3组件通信方式总结
m0_55644132的博客
05-16 806
在vue框架中事件分为两种：一种是原生的DOM事件，另外一种自定义事件。（vue2中需要添加 .native）原生DOM事件可以让用户与网页进行交互，比如click、dbclick、change、mouseenter、mouseleave…自定义事件可以实现子组件给父组件传递数据自定义事件可以实现子组件给父组件传递数据，在项目中是比较常用的。比如在父组件内部给子组件(Event2)绑定一个自定义事件在Event2子组件内部触发这个自定义事件
《硅谷甄选》项目笔记
starry-sea1412的弃坑之路
05-20 5343
这篇文章是项目实战硅谷甄选的笔记，该项目采用最新的Vue3版本+组合式API开发方式。
尚硅谷Vue项目实战硅谷甄选Vue3学习笔记
qq_43634431的博客
01-25 1111
/props:可以实现父子组件通信,props数据还是只读的！//第一个参数:事件类型 第二个|三个|N参数即为注入数据。//利用defineEmits方法返回函数触发自定义事件。//利用defineEmits方法返回函数触发自定义事件。//第一个参数:即为事件类型 第二个参数:即为事件回调。//该回调用的是父类给予的handler3。//拿下父类给予的自定义事件xxx。//将来接受子组件传递过来的数据。//子组件内部按钮的点击回调。//event即为事件对象。//第一个按钮的事件回调。
vue.js使用v-model实现父子组件间的双向通信示例
10-15
总的来说，这个示例展示了如何使用`v-model`在Vue.js中实现父子组件间的双向通信。子组件通过`props`接收父组件的数据，并通过`$emit`和`watch`来响应并更新这些数据，进而通知父组件。这种方式使得组件间的通信变得...
vue3实现v-model原理详解
10-16
Vue 3中的v-model实现原理 Vue 3中v-model的实现原理与Vue 2.x有所不同。Vue 3的v-model不再直接...在理解了Vue 3的v-model实现原理后，我们可以更好地使用Vue 3提供的Composition API，创建出更加灵活和强大的组件。
巧妙运用v-model实现父子组件传值的方法示例
10-17
总结来说，通过这种方式，我们实际上利用了Vue内部v-model的机制来实现父子组件间的数据传递和更新。这种方法特别适合于子组件需要将数据变化通知给父组件，并且希望父组件能够同步更新其数据的场景。
vue项目中v-model父子组件通信的实现详解
10-18
vue.js，是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和...下面这篇文章主要给大家介绍了关于vue项目中v-model父子组件通信实现的相关资料，需要的朋友可以参考下。
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
08-28
Vue 自定义组件 v-model 双向绑定、父子组件同步通信的多种写法 在 Vue 中，父子组件通信通常是单项的，但是在实际开发中，我们经常需要双向通信。因此，本文将介绍 Vue 自定义组件 v-model 双向绑定、父子组件同步...
【前端】VUE动态引入组件 通过字符串动态渲染模板 动态生成组件
我是Superman丶的博客
08-19 233
【前端】VUE动态引入组件 通过字符串动态渲染模板。
移动端签名
最新发布
notagoodwriter的博客
08-23 142
【代码】移动端签名。
vue中定义一个url文件,在vue文件中引入
weixin_65767506的博客
08-22 238
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
vue数据同步（sync修饰符）
weixin_62639453的博客
08-23 175
本文描述的数据同步，是基于父子组件进行传递的参数实现。实现的内容是：子组件里面选择框，选择的对象可以传递给父组件，但一般涉及到子传父，可能会考虑使用$emit然后通过在父组件身上绑定一个自定义方法，通过子组件去emit触发这个事件，传递参数,但是这里不使用这种，新学了一种，数据同步的方式，也就是在子组件选择的数据，可以同步在父组件中。随便在父组件其他地方绑定一个事件，看看有没有获取到从子组件里面获取到的值，因为要拿选择的值过来父组件这边使用。被执行时，父组件会自动接收到这个事件并更新。
Vue UI - 可视化的Vue项目管理器
独泪了无痕
08-17 1046
这一步在选择项目所需的配置项时，就很直观了。页面内也有很多提示和查看详情的入口，相较于之前命令行的方式，方便简单多了。我这里只简单选择了Choose Vue version、Babel、Router等三项。选择Vue语法版本（2.x / 3.x（Preview））；选择路由模式（history mode / hash mode）；
element-ui下拉框的使用
weixin_51480428的博客
08-20 285
【代码】element-ui下拉框的使用。
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
Anislandwhale的博客
08-21 920
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
Vue UI 组件库
qq_53374893的博客
08-20 356
移动端还有一个。
linux使用nginx部署springboot + vue分离项目
技术分享
08-20 99
linux使用nginx部署springboot + vue分离项目。
vue2中v-model实现父子组件通信
07-10
在Vue 2中，可以使用`v-model`指令来实现父子组件之间的双向绑定通信。下面是一个简单的示例： 首先，在父组件中定义一个属性，并使用`v-model`指令绑定到子组件上： ```vue <template> <div> <child-component v-model="message"></child-component> <p>父组件中的消息：{{ message }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: '' }; } }; </script> ``` 然后，在子组件中，使用`props`接收父组件传递的值，并使用`$emit`方法触发一个名为`input`的事件来更新父组件的值： ```vue <template> <div> <input type="text" :value="value" @input="$emit('input', $event.target.value)"> </div> </template> <script> export default { props: ['value'] }; </script> ``` 这样，当在子组件中输入内容时，会触发`input`事件并更新父组件的`message`属性值。同时，父组件中的`message`属性值的变化也会通过`v-model`指令传递给子组件。 这就是在Vue 2中使用`v-model`实现父子组件通信的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值