vue3子组件可以直接修改父组件的数据了？

最新推荐文章于 2023-12-28 10:00:26 发布
最新推荐文章于 2023-12-28 10:00:26 发布
阅读量756 收藏 2
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52444774/article/details/132234612
版权

在项目中，看到了同事的代码，一脸震惊！

 他竟然直接在子组件修改父组件传递过来的数据。而且代码实现还是成功的。

吓得我以为vue3更新了

然后尝试重新写了个数据，发现是不成功的

直接更改非对象或数组类型的props数据控制台是会报警告的，告诉你该数据是只读的。

 

 

然后仔细一查文档发现只有对象和数组类型的props数据可以更改。能成功，but是vue是禁止这样直接修改的，有缺点而且耗性能啥的。

 所以说，咱还是乖乖自定义方法去修改props数据吧。

阿进吖
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue2.0 父组件给子组件传递数据的方法
01-19
在父组件 App.vue 中引用子组件 A.vue，把 name 的值传给 A 组件。 1、安装 在桌面新建一个文件夹 $ cd 到文件中 $ npm install -g vue-cli $ vue init webpack . $ npm install $ npm run dev vue init webpack . 之后的选择解释 2、删除 1、删除App中的一些内容如下 2、删除components文件中的HelloWorld.vue 3、修改 修改App.vue 如下： <template> <div id=app> // message 定义在子组件的 props
解决vue 子组件修改父组件传来的props值报错问题
12-13
vue不推荐直接在子组件中修改父组件传来的props的值，会报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “result” (found in component ) <input v-model="currentSe
vue中如何让子组件修改父组件数据
08-27
主要介绍了vue中子组件修改父组件数据的相关资料，文中介绍了vue中watch的认识，关于子组件修改父组件属性认识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue3 子组件中直接修改父组件传递过来的值
bighead的博客
03-22 7669
vue2 中常用的子组件改变父组件的值 子组件中用$emit向父组件中发射一个自定义事件，然后在父组件的methods中定义这个方法，方法体中做数据处理。 父组件： <template> <Children :count="count" @changeCount="addCount" /> </template> <script lang="ts"> import Children from './components/Children.vue' ex
vue3 子组件修改父组件传过来的值
queen_css的博客
06-10 4418
const click=()=>{ emit('update:num',123) //123 代表是将num值修改为123 }
vue3.0 子组件修改父组件传递过来的值
Start的小笔记
01-17 1万+
vue 的子组件 不是 不能直接更改父组件的值，需要将props 的值 给到子组件，后再修改， 否则：Unexpected mutation of “props” prop. vue3提供了一个解决：toRefs：https://v3.cn.vuejs.org/api/refs-api.html#torefs toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行解构/展开 使用 const { foo, bar } = reactive({ foo: 1, b.
VUE子组件更改父组件数据
三包酸奶！的博客
06-12 1万+
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：this.$emit(‘update:title’, newTitle) 然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。
Vue 组件修改根实例的数据的方法
10-17
主要介绍了Vue 组件修改根实例的数据的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3中修改父组件传递到子组件中的值(全网少有)
Yan9_9的博客
12-16 8016
/此处是父组件中引入的子组件 < ChildrenView v - model : num = "num" / > //定义数据 let num = ref(10);//定义num为10,传递给子组件< script setup > //子组件接收父组件传递过来的数据 let props = defineProps({});
vue3 steup 子组件修改父组件值俩种方式。
qq_42957741的博客
08-12 1万+
vue3组件封装，子组件改变父组件值。
vue3子组件弹框修改完数据，更新父组件表格（子传父）
最新发布
2301_76423183的博客
12-28 551
当子组件修改完参数，父组件里的表格并不会主动更新，可以向父组件发送一个修改完成信号，当父组件接收到时，更新表格。
vue子组件更新父组件值
weixin_44706621的博客
10-20 1816
子组件更新父组件 父组件定义参数 <template> <view class="prepayment-trial-info"> //这里是需要更新的数据:mailForm.sync="mailForm"，将会更新mailForm字段 <user-info-mail :mailForm.sync="mailForm"></user-info-mail> </view> </template> <scri
vue子组件修改父组件传递过来的值
m0_45043105的博客
11-15 533
把一个布尔值传递给子组件，然后，在子组件中修改该值，会报错 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders 原因： 在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数...
Vue子组件修改父组件的传入的值
weixin_47190975的博客
08-09 2479
Vue子组件修改父组件的传入的值
【vue3】子组件修改父组件传过来的props数据
热门推荐
坚信万物皆可切的切图仔
12-17 2万+
前言 最近新项目用vue3搭建的，准备开始使用vue3的语法，从这篇开始记录下vue3遇到的一些问题和一些语法的使用方法，以便于以后复习，也可能帮助到一些小伙伴。 1. 修改父组件普通数据 使用v-mode语法，代替了vue2.x的.sync修饰符 父组件用ref() 定义一个普通数据为响应式变量，例 var test = ref(‘parent’) 父组件用v-mode将数据绑定到子组件上 <ChildComponent v-model:test="test" /> 其实它是以下
VUE实现在子组件中修改父组件的数据
weixin_53540511的博客
09-30 6510
在VUE的开发中，最大的特点就是可以调用各种组件，调用组件者我们称之为父组件，被调用的组件我们称之为子组件。由此，我们一定会遇到父子组件中互相调用数据和修改数据，本节重点讲一下在子组件中如何修改父组件的数据，亲测可用。
vue3 父子组件传值，子组件修改父组件的值
weixin_42941628的博客
08-06 960
【代码】vue3 父子组件传值，子组件修改父组件的值。
vue3中子组件改变props
前端小口袋
05-10 8725
周所周知vue的props是单向数据流，可以从父组件中改变传往子组件的props，反之则不行，所以在vue2时，用.sync修饰符搭配配合$emit可以实现子组件改变props，如下 //父组件中 <Toast :show.sync="shows" clickPropus title="标题" okValue="取消" closeValue='确定' info="内容，内容内容内容内容内容内容内容内容内容内容内容内容"
vue3子组件修改父组件数据
08-31
在Vue3中，子组件修改父组件的数据有两种常见的方法。第一种方法是使用v-model来进行父传子，并且子组件可以修改父组件传递过来的数据。通过在父组件中使用v-model指令将父组件的数据与子组件的属性进行双向绑定，子组件可以直接修改父组件的数据。这样就实现了子组件修改父组件数据的效果。 第二种方法是使用状态管理库，例如Pinia或者Vuex来进行数据的管理和修改。在父组件中定义一个状态，并通过状态管理库进行状态的管理。然后在子组件中通过调用状态管理库的方法来修改父组件的数据。这种方法适用于需要在多个组件之间共享和管理数据的复杂场景，通过状态管理库可以更好地组织和管理数据的修改。 举个例子，假设在父组件中定义了一个名为num的数据，并将其传递给子组件。在子组件中可以通过修改子组件自身的属性来间接修改父组件的数据。例如，在父组件中使用v-model指令将num与子组件的num属性进行双向绑定，然后在子组件中通过修改子组件的num属性来修改父组件的数据。 总结起来，Vue3中子组件修改父组件数据的方法可以是使用v-model进行父传子，并且子组件修改父组件传递的值，或者使用状态管理库进行数据的管理和修改。具体选择哪种方法取决于具体的需求和场景。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue3中修改父组件传递到子组件中的值(全网少有)](https://blog.csdn.net/Yan9_9/article/details/128343052)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue中如何让子组件修改父组件数据](https://download.csdn.net/download/weixin_38517113/12758427)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值