关于props传值，在子组件里面去修改父组件的值

最新推荐文章于 2024-05-15 14:35:26 发布
最新推荐文章于 2024-05-15 14:35:26 发布
阅读量867 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41757599/article/details/104582461
版权

因为父子传值的用props传值的时候，子组件不能随意修改父组件的值，因此需要用到 this.$emit(‘update:父组件传给子组件的值的键’,修改的值) 这个方式去修改

父组件：

<indexlist :item="item" :index="index" :id="'id'+index" :isguanzhu.sync="item.isguanzhu"></indexlist>



子组件接受到父组件的 isguanzhu这个值，是布尔类型的，需要修改，因此在子组件的对应修改的点击事件里面去触发

```javascript
this.$emit('update:isguanzhu',true)
肥仔仔仔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 父组件给子组件传值子组件给父组件传值的实例代码
10-17
首先，在子组件中定义`props`，声明需要接收的属性。例如，子组件`fromTest.vue`如下： ```html <h2>{{title}} export default { props: ["title"], }; ``` 这里，`props`数组声明了一个名为`...
vue父组件向子组件动态传值的两种方法
08-28
在子组件中，我们可以使用 watch 监听 props 的变化，并将其赋值给组件的数据： ```javascript watch: { srcList(curVal, oldVal) { if (curVal) { this.uploadImg = curVal; } } } ``` 这样，子组件就可以成功...
[vue] props传值，子组件直接改变父组件的值
qq_34450741的博客
05-25 530
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。 2.实例应用，比如自定义弹窗 主页：（父组件） 注意 .sync <custom-dialog :visible.sync="dialogVisible"></custom-dialog> export default { name: '', data()..
Vue: 子组件修改父组件数据以及子组件带参数修改父组件数据的方法 ( props)
Specif1c的博客
03-28 3127
前言： props属性的特点：（单向数据流） 业务中会经常遇到两种需要改变props的情况，一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件data中再声明一个数据，引用父组件的prop。 $emit: $emit 触发当前实例上的事件，也可以简单的理解为触发父组件上的事件（向上冒泡) 具体$emit参考官方文档：https://...
【随手小记】子组件更新props精简版
最新发布
qq_35227244的博客
05-15 186
常规用法中，props的属性值value 在子组件中是只读的，要修改value的值只能在父组件中修改，首先在子组件中emit(事件名event，value值) 发送给父组件，然后在父组件监听到event，更新value或者其他逻辑处理，这里不做过多描述。导读：有时候我们只想要简单更新某个props属性值，也许是显示标志的布尔值，也许是标题title，这类只是单纯更新值的处理，写一遍传值-监听-更新就显得很冗长，这里记录一种精简版的更新props属性值的方法。这样父组件就不用再加监听函数了！
前端vue中父子组件之间的传值（修改值）和事件的相互调用
qq_52135683的博客
04-16 4444
在Vue中，子组件不能直接改变父组件的数据，因为Vue是单向数据流的。但是可以通过触发父组件的事件并传递数据来实现子组件改变父组件的数据。父组件可以在模板中监听这个自定义事件，并定义相应的事件处理函数来响应子组件的操作。父组件可以在模板中监听这个自定义事件，并定义一个相应的方法来处理子组件的操作。在父组件模板中使用子组件，并为该组件绑定一个自定义事件，当子组件需要修改数据时，就会触发这个事件。在子组件中，通过修改该属性的值，就能够直接修改父组件的数据。事件，并将其绑定到一个方法上，用于更新父组件中的数据。
如何在子组件中修改父组件传入的props?
m0_46639734的博客
04-23 1032
所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。以上就是今天要讲的内容，本文仅仅简单介绍了prop的单向数据流的使用，这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
如何在子组件中修改父组件的值
qq_42931285的博客
04-29 4137
在子组件中修改父组件的值、snyc、 数据代理、数据劫持
vue2.0 子组件改变props值,并向父组件传值的方法
08-27
props 是 Vue 组件之间通信的重要手段，但是在子组件中修改 props 值时需要注意避免影响父组件的状态。下面我们将讨论如何正确地改变 props 值并向父组件传值。 为什么修改 props 值？ 通常，我们修改 props 值是...
Vue父组件向子组件传值以及data和props的区别详解
10-15
在子组件内部，我们声明`props`数组，如`props: ['parentmsg']`，表示子组件将接收名为`parentmsg`的属性。之后，子组件可以在模板中使用`{{parentmsg}}`来显示这个值。 ```javascript props: ['parentmsg'], ...
vue 组件间的通信之子组件向父组件传值的方式
10-15
在子组件内部，我们需要在`props`选项中声明接收的属性，如`props: ['name']`，这样就可以在子组件内部使用`name`属性了。 现在，我们重点关注子组件向父组件传递值的几种方式： 1. **使用`this.$emit()`**：子...
vue中子组件修改父组件中传入的数据
u010640592的博客
02-19 6986
vue中父子组件数据修改的问题 文章目录vue中父子组件数据修改的问题前言一、子组件能否直接修改父组件中传入的数据？如何才能解决父子组件之间数据的双向绑定呢？二、使用步骤1.引入库2.读入数据总结 前言 这篇文章主要针对vue2中的父子组件之间，数据的修改以及方法的调用而展开的内容 提示：以下是本篇文章正文内容，下面案例可供参考 一、子组件能否直接修改父组件中传入的数据？ 官方文档（单项数据流，你不应该在一个子组件内部改变 prop）给出的答案是否定的。 虽然官方建议不要在组件内部修改prop，但是在
Vue 子组件修改父组件传递过来的值
weixin_45442464的博客
08-26 1万+
1. 常用的方法 一般通过子组件修改父组件传递过来的值,我们就会采用props和$emit进行单向数据绑定 父组件: <template> <div> <test :value="value" @change="change"></test> </div> </template> <script> import test from '@/components/test.vue' export d
【Vue】11.解决父组件通过props属性向子组件传入的值被修改以后报错的问题
返璞归真
01-26 1万+
我在做vue项目的时候遇到了这样的一个问题，在这里做一下总结，就是在提交表单的时候会有一个弹框提醒，这个Dialog我把它封装成了一个子组件，这样在父组件的data属性里面就会定义一个Dialog显示还是隐藏的变量，这个变量默认是false，点击按钮的时候这个变量要变成true显示Dialog，完了以后要关闭Dialog按钮，这个变量就要从父组件传入子组件，在子组件里面改变以后再传回父组件，这里我...
vue 子组件修改props中的值
qq_35410544的博客
11-01 4万+
问题：子组件想修改父组件传来的值（props中的值）。普通的修改会报错，因为这个值是单向的，只能传进来，要是想修改就要用v-model 解决办法：用v-model 写个简单粗暴例子： 父组件 &lt;control :lingthData="lingthData" v-model="deviceF"&gt;&lt;/control&gt; //v-model里面写上我们要传给子组件...
vue 父子组件传值 子组件修改父组件值的解决办法
jj_0628的博客
11-08 1万+
最近在前端项目中遇到了父子组件传值的问题... vue中父组件向子组件传值时，其父子prop之间形成单向下行绑定，反过来则不行，这样会防止子组件意外改变父组件的值，从而数据流变的难以理解；另外，每次父组件的数据发生更新时，子组件的都会刷新到最新的数据，但不能改变子组件内部改变prop，这样浏览器就会发出警告 解决办法来啦 解决办法一、子组件想要修改时，需要通过$emit派发一个自定义事件，父...
vue—子组件修改父组件的值
热门推荐
Leon的博客
02-28 5万+
如何在子组件中修改父组件的值 第一步：首先得保证父组件中有值吧 这是userManage.vue data（）{ return{ dialogCreate:'false' } } 第二步：在父组件中引用子组件 import Form from './userCreate' 第三步：父组件中注册子组件并引用 &lt;template&gt; ...
Vue 子组件直接修改 props 中的属性值（单向数据流）
Microven
03-02 1万+
理论 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。 另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。 Vue3 Props 文档 尝试通过下面的方法直接修改属性值 this.$props.modelValue
vue的props实现父组件变化子组件一起变化
马优晨
09-02 2万+
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 绑定动态 Props 到父组件的数据。每当父组件的数据变化时，也会传导给子组件：<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div> 使用 v-bind 的缩写语法通常更简单：<
vue3 props传值 每次父组件的值变化子组件就会相应发送变化吗
03-30
在 Vue3 中，使用 `props` 传递数据时，如果父组件的值发生变化，子组件会相应地更新它接收到的值。但是，这并不意味着每次父组件的值变化就会立即发送变化，而是会在下一次组件更新周期时才进行更新。这是因为 Vue3...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值