为什么子组件的v-model不会从emit回流到父组件？

子组件的v-model不会从emit回流到父组件的原因是因为v-model实际上是一个语法糖，它是基于props和emit实现的双向数据绑定。

在Vue中，父组件通过props将数据传递给子组件，子组件通过emit触发事件将数据传递回父组件。但是v-model只是简化了这个过程，它将props和emit封装成了一个语法糖，使得数据的传递更加简洁。

当子组件使用v-model绑定一个值时，实际上是将这个值作为props传递给子组件，并且在子组件内部通过emit触发一个名为"update:modelValue"的事件将数据传递回父组件。父组件接收到这个事件后，可以通过监听这个事件来更新自己的数据。

但是需要注意的是，子组件内部对v-model绑定的值进行修改，并不会直接影响到父组件的数据。这是因为在Vue中，props是单向数据流，父组件向子组件传递的数据是只读的，子组件不能直接修改props的值。所以子组件内部对v-model绑定的值的修改只会影响到子组件自身的数据，而不会回流到父组件。

如果需要在子组件内部修改父组件的数据，可以通过在子组件内部定义一个data属性，并在子组件内部修改这个data属性的值。然后通过在子组件内部监听父组件传递的props的变化，并在变化时将props的值赋给子组件内部的data属性，从而实现子组件内部对父组件数据的修改。

总结起来，子组件的v-model不会从emit回流到父组件是因为props是只读的，子组件不能直接修改props的值，而v-model只是简化了props和emit的双向数据绑定过程，但并不改变props的只读性质。

相关·内容

父组件使用v-model，子组件竟然不用定义props和emit抛出事件

大家都知道v-model是:modelValue和@update:modelValue的语法糖，但是你知道为什么我们在子组件内没有写任何关于props的定义和emit事件触发的代码吗？...只能通过emit抛出事件给父组件，让父组件在事件回调中去修改props传递的变量，然后通过props将更新后的变量传递给子组件。...这就是为什么不需要在子组件中使用使用emit抛出事件，因为在defineModel宏函数编译成的useModel函数中已经帮我们使用emit抛出事件了。...使用defineModel宏函数后，为什么我们在子组件内没有写任何关于emit事件触发的代码？...并且将最新的值随着事件一起传递给父组件，由父组件在update:modelValue事件回调中将父组件中v-model绑定的变量更新为最新值。

2221 0

解决在V2.0中子组件使用v-model接收来自父组件的值异常

当我们使用父组件向子组件传值，当子组件中是v-model使用该值时会报：[Vue warn]: Avoid mutating a prop directly since the value will be...overwritten 原因为：在Vue 2.x中移除了组件的props的双向绑定功能，如果需要双向绑定需要自己来实现。...解决办法为：创建针对props属性的watch来同步组件外对props的修改（单向）在组件外（父组件）修改了组件的props，会同步到组件内对应的props上，再创建一个针对props属性result...的watch（监听），当props修改后对应data中的副本myResult也要同步数据。...代码实例如下： </template

3.1K3 0

如何构建运行良好的Vue组件

假设有父组件Parent和子组件Child // Parent ......此处有两处异常：父组件中设置的placeholder等属性没有传到子组件；父组件设置的属性传递给了子组件的根元素，即label，而label是不需要的 attrs和inheritAttrs:false...即分别用来解决这两个问题首先，inheritAttrs:false解决子组件的根元素继承父元素的属性；其次，子组件中添加了v−bind=" 接受浏览器的键盘导航规范可访问性和键盘导航是Web开发中最常被遗忘的部分之一...使用事件优先于回调当涉及到从组件到其父组件的数据通信和用户交互时，有两个常见的选择：props中的回调函数和事件。...因为 Vue 的自定义事件不会像原生浏览器事件那样冒泡，所以两者在功能上是等效的，但是对于可重用的组件，建议能使用事件就使用事件，其次在再是回调，为什么？

3.7K2 0

Vue总汇

，不会报错 4.定义：props是上游组件传递的数据，子组件不可修改 5.props是父传子最常见的通信方式 props父传子父组件向子组件通过绑定属性传递一个数据子组件通过Props接收父组件传递的属性值...$childern获取子元素直接操作子元素或调用子元素的方法【非常不推荐】 $emit子传父 1.常规方式 emit调用父级传过来的函数 2. parent获取父组件实例对象，直接修改或调用【非常不推荐...】双向通信 v-model 作用：使父子组件进行双向的伪绑定语法： 1.父传子 v-model绑定到子组件上 2.子传父 this....$emit('input',newData) 概念：当我们在子组件上使用使用v-model的时候，会自动的向子组件注入一个value值和input函数，子组件如果想修改value就是用$emit调用...，比如样式绑定但是在子组件的slot标签上传参默认父组件不能直接使用父传子和常规传参一样在子组件上绑定属性子组件用props接收子传父 // 子组件 <slot name='header

1111 0

Vue自定义组件：解密v-model，轻松实现双向数据绑定

实现自定义组件的v-model功能可以按照以下步骤进行：在自定义组件中定义一个value属性：这个属性用于接收父组件传递给子组件的值，并在子组件内部进行使用。...对于非表单元素的自定义组件，可以根据需要实现类似的双向数据绑定功能，但需要注意的是，此时的v-model指令并不会像在表单元素中那样自动更新数据。...在非表单元素的自定义组件中实现类似v-model的双向数据绑定，可以按照以下步骤进行：在自定义组件中定义一个value属性：这个属性用于接收父组件传递给子组件的值，并在子组件内部进行使用。...在自定义组件内部，通过$emit方法触发自定义事件：当在子组件中修改了value属性的值时，通过调用this....在父组件中使用子组件时，使用v-bind指令将父组件中的数据属性绑定到子组件的value属性上。在父组件中监听子组件的自定义事件，并更新父组件中的数据属性。

8473 0

前端面试之Vue

挂载阶段父created->子created->子mounted->父mounted 父组件更新阶段父beforeUpdate->父updated 子组件更新阶段父beforeUpdate->子...props/emit 父子组件通信父->子props，子->父 emit/on 自定义事件兄弟组件通信 Event Bus 实现跨组件通信 Vue.prototype....vuex 跨级组件通信 Vuex、attrs、listeners Provide、inject $emit 后面的两个参数是什么 1、父组件可以使用 props 把数据传给子组件。...2、子组件可以使用 $emit,让父组件监听到自定义事件。...它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。作用：实现组件缓存，保持这些组件的状态，以避免反复渲染导致的性能问题。

3.7K3 0

京东前端二面必会vue面试题（持续更新中）_2023-02-24

props / $emit 适用父子组件通信父组件向子组件传递数据是通过 prop 传递的，子组件传递数据给父组件是通过$emit 触发事件来做到的 ref 与 $parent / $children..."> props:['changeMsgFn'] 子组件向父组件通信父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件父组件vue模板father.vue: ...，可以通过 v-model属性来配置子组件接收的prop名称，以及派发的事件名称。...通过input事件把数据$emit 出去，在父组件接受。父组件设置v-model的值为input $emit过来的值。 Vue模版编译原理知道吗，能简单说一下吗？...组件不会被卸载：（1）单页面渲染要切换的组件作为子组件全屏渲染，父组件中正常储存页面状态。

8313 0

vue .sync修饰符的使用

不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之。...其实还是vue父组件可以监听子组件的事件，自组件可以触发父组件的事件 father.vue <input type="text...$emit('incre', ++this.num) } }, } 在没有sync的时候，我们要实现双向绑定，可能需要在父组件里绑定一个事件和一个值 father.vue...$emit('update:word', newword) } }, } 父组件中的子组件，少写了一个自定义事件属性，子组件中$emit直接出发父组件中数据的更新，清新明了...父子组件的双向数据绑定 父组件改变数据可以改变子组件, 但是子组件的内容改变并不会影响到父组件 可以通过2.3.0新增的sync修饰符来达到双向绑定的效果 father.vue

1.1K2 0

Vue3 | 父子组件间通信、组件间双向绑定的高级内容、插槽详解、动态组件、异步组件

板块整理组件事件使用组件emits板块的 Object形式校验外传的参数值结合$emit、v-bind与v-model 实现父子组件通信（数据双向绑定）结合$emit、v-bind与v-model...$emit('【自定义事件名】')，向外发送一个事件；接着各级父组件会收到这个事件，则在父组件中调用子组件标签处，以 @【事件名】= "回调方法名"的形式，监听该事件以及配置回调方法...当然父组件接收子组件参数后的计算逻辑，可以在子组件传参的时候计算完成再传给this.$emit()！...，子组件的承接变量modelValue 同父组件的count字段双向绑定，（实际上就是v-model的特性 —— 将子组件的内容即modelValue 同父组件的数据字段双向绑定）...、v-bind与v-model 实现父子组件通信（多个字段的应用案例）如下代码，父组件的count与子组件承接的testField字段，父组件的count1与子组件承接的testField1

6.2K1 0

vue中的v-model刨根问底

在子组件中，通过props中的value来接收父组件中传的值，同时可以通过 $emit('input', e) 来同步更改父组件中的值。...在组件中使用v-model通过props接收值和$emit传值，同我们自己在父组件上绑定一个属性和$emit传值可以少一步在父组件中监听@input的操作，所以在组件使用v-model也是很丝滑的。...: { prop: 'city', // 对应父组件中绑定的属性（即子组件中接收的props） event: 'change'// 对应父组件中监听的事件（即子组件中的$emit） },...的亲戚sync和updatevue从1.0版本就提供了.sync 绑定修饰符，组件 prop 默认是单向绑定的，加上 .sync 后会把子组件的 prop 属性同步回父组件。...$emit('update:city', e)、$emit('update:country', e)来更改父组件中的值vue 3 中新增了一个emits选项：和现有的 props 选项类似，这个选项可以用来定义一个组件可以向其父组件触发的事件

2832 0

Vue 面试知识点

$nextTickVue 是异步渲染，data 改变后，DOM 不会立刻渲染，页面渲染时会将 data 的做整合，$nextTick 会在 DOM 渲染完之后执行延迟回调，减少 DOM 操作次数，提高性能组件...data 为什么返回函数两个实例都引用同一个对象，当其中一个实例属性改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会互相干扰Component.prototype.data...beforeUpdateupdatedbeforeDestroy 清除定时器、自定义事件destroyed父子组件创建、更新顺序父组件 created 子组件 created 子组件 mounted 父组件...mounted父组件 beforeUpdate 子组件 beforeUpdate 子组件 updated 父组件 updated组件之间的传值通信父组件给子组件传值通过 props子组件给父组件传值通过...$emit 触发回调其他组件通信，通过实例一个 Vue 实例 event 作为媒介，要相互通信的组件之中，都引入 event动态路由配置（路由懒加载）{ path: '/user/:id', component

1K1 0

Vue组件间通信方式

在父组件中使用子组件，本质通过v-bind绑定属性传入子组件，子组件通过props接收父组件传入的属性。...$emit使用　　触发当前实例上的事件。附加参数都会传给监听器回调。子组件触发父组件方法,通过回调的方式将修改的内容传递给父组件，父组件通过v-on接收子组件传入的方法，并接收子组件传入的参数。...-- 触发的事件名 update:(绑定.sync属性的名字) --> 更改 v-model 一个组件上的... 子组件1: {{value}} // 触发的事件只能是input <button @click="$emit...可以在父组件中获取子组件的属性和方法。

5602 0

八种 Vue 组件间通讯方式合集

├── Parent.vue // 父亲 ├── Son1.vue // 儿子1 代码结构子组件通过触自身的方法来触发$emit方法,再触发父组件的方法,通过回调传参的方式将修改的内容传递给父组件...$emit("changeNum", 2); }, }, }; 父组件接受回调params参数，即爸爸需要给儿子绑定了一个自定义的事件，$on("changeNum",params...$emit("input", 2); }, }, }; 父组件通过v-model接收参数爸爸:{{value}}...$attrs); }, }; 注意一点：在使用 $attrs 的时候，如果组件中使用了props 就会将属性从当前 attrs移除掉在孙子组件中使用 $attrs属性,可以将属性继续向下传递...父组件中可以直接获取子组件的方法或者数据。

1K1 0

Vue组件之间传值

$parent：子组件修改父组件数据，这要在props的基础上才能使用，子组件修改父组件直接赋值会报错，使用this.$parent.msg = ‘修改父组件’;子组件就可以修改父组件的数据。...$emit：也是很常见的放，子组件通过方法传递参数给父组件。....sync修饰符：父组件： {{msg}} 子组件： <input type="text" v-model="index"...这边要注意一点，想要响应式的改变各个子组件的数据，msg想要是一个对象，否则子组件不会动态响应all这个数据。...使用provide和inject的时候，要注意，因为这跟props不一样，不是局限于从当前父组件获取的，所以在非常多组件之间调用的时候，不利于维护。

1.9K2 0

Vue.js 组件间的数据传递方法

父组件向子组件传数据这种应该是 vue.js 中最常见也是最为自然的一种方式了，要求我们在子组件中声明 props 然后在父组件中为子组件的 prop 赋值。...那现在就变成了怎么调用到父组件的方法了，办法说来也简单那不就是，把父组件的方法通过 props 传递给子组件，这样子组件就能调用到了。...子组件向父组件传递数据 - 自定义事件实现这个实现和 props 在代码上差不多，props 实现是在子组件里直接调用父组件的函数。...事件的实现手法是子组件触发事件，并配置好对应的参数值，父组件只要注册好事件的监听就行了。...emit 方法，事件消费者通过 on 主动的注册事件回调，就能完成数据传递了。

6K1 0

vue组件详解（三）——组件通信

子组件用$emit （）来触发事件，父组件用$on（）来监昕子组件的事件。...total发生变化时，会通过传递value值，影响子组件input中的value值，而子组件改变自己input中的value值，又会广播给父组件，影响父组件中的total值。...bus 把事件updateMessage发出去，此时app 就会接收到来自bus 的事件，进而在回调里完成自己的业务逻辑。...四、父链与子组件索引除了中央事件总线bus 外，还有两种方法可以实现组件间通信：父链和子组件索引。在子组件中，使用this....$parent 可以直接访问该组件的父实例或组件，父组件也可以通过this.$children 访问它所有的子组件，而且可以递归向上或向下无线访问，直到根实例或最内层的组件。

1.2K4 0

组件化详细

想使用其他组件的数据，就需要组件通信如何通信及其组件之间的关系分类父子关系非父子关系父组件通过 props 将数据传递给子组件子组件利用 $emit 通知父组件修改更新父向子通信代码示例...props接收的值子传父通信代码示例子向父传值步骤 $emit触发事件，给父组件发送消息通知父组件监听$emit触发的事件提供处理函数，在函数的性参中获取传过来的参数 props 定义组件上...v-model其实就是 :value和@input事件的简写子组件：props通过value接收数据，事件触发 input 父组件：v-model直接绑定数据子组件 <select :value=...所以就可以通过@blur="isEdit = false"实现失去焦点回显标签信息回显的信息是通过父组件传入的，可以通过v-model实现，也可以通过前面所学的props实现。...通过上述的步骤就可以实现数据从父标签传入子标签，实现标签内容的回显回车修改标签内容上述的回显示标签信息是通过父标签传子标签的形式实现的，但是如何实现子标签传入父标签呢 ?

1801 0

【vue3】详解单向数据流，大家千万不用为了某某而某某了。

：所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。...那么问题来了： reactive 在父组件可以改，不会难以理解。 reactive 通过依赖注入的方式给子组件，虽然官网不建议直接改，但是就问问你，你会不会直接改？...（后续跟进） emit 怎么可以改了？ emit 本意是子组件向父组件抛出一个事件，然后 vue 内部提供了一种方式（update:XXXXX），可以实现子组件修改父组件的需求。 <!...如果限制的是发起者的话，那么 emit 也不行，因为也是在子组件发起的，啥时候改，怎么改都是由子组件决定，emit只是一个无障碍通道的起始端，另一端是 v-model。...v-model + emit 目的是实现父子组件之间，值类型数据的响应性，如果不用 emit 的话，如何实现？

1321 0

vue ---- 组件传值之间使用 v-model

方法如下：　　1、父组件使用：msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx') 　　2、父组件传值直接传对象，子组件收到对象后可随意改变对象的属性...3、父组件使用： v-model 　　第一种曾经被废除过，由于维护成本的原因被删掉，但经过证实，确实有存在的意义，又被加上。　　...$emit('update:snycTest', this.snycTest+1) //这儿是关键 update:snycTest 自定义事件会告诉父组件将父组件的 test值改为this.snycTest...（此处为aa组件被父组件调用）v-model能取到的值，event说，我emit ‘cc’ 的时候，参数的值就是父组件v-model收到的值。...子组件 {{'里面的值：'+ value}} // 组件使用时有v-model属性，value初始传的‘what’ 不会被渲染

1.3K2 0

一文搞懂 Vue3 defineModel 双向绑定：告别繁琐代码！

原因是因为从vue2开始就已经是单向数据流，在子组件中是不能直接修改props中的值。而是应该由子组件中抛出一个事件，由父组件去监听这个事件，然后去修改父组件中传递给props的变量。...那么问题来了，从vue2开始就变成了单向数据流。这里修改子组件的值后，父组件的变量值也被修改了，那这不就变回了vue1的双向数据流了吗？...并且当在子组件内改变model变量的值后会抛出update:modelValue事件，父组件收到这个事件后就会更新父组件中对应的变量值。...("update:modelValue", model.value); }); 看了上面的代码后你应该了解到了为什么可以在子组件内直接修改defineModel的返回值后父组件对应的变量也会同步更新了吧...在子组件内当修改ref变量值时会抛出一个事件给父组件，让父组件更新对应的变量值，从而实现双向绑定。

2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云