- 26
- 0
vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在很多情况下是需要这样做的,比如在做功能编辑的时候,子组件需要带入父组件的原始值,而且子组件也需要修改这个值,到最后的保存值中,部分代码
// 父组件
<step-two-other v-bind:stepTwoConfig.sync="monitorConfigStr"></step-two-other>
// 子组件
<el-input v-model="config"></el-input>
props: {
stepTwoConfig: String
},
computed: {
config: {
get() {
return this.stepTwoConfig
},
set(val) {
this.$emit('update:stepTwoConfig', val)
}
}
}
以上代码是正确的通信方式。
但是在使用的时候发现一些问题,如果父组件传入的值是简单数据类型(string、number)时必须要使用$emit去更新。
如果父组件传入的值是引用类型时则不需要,甚至父组件不用带sync也可以,如下两种方式都不会报错,而且能挣钱传值:
// 方式1:::
// 父组件
<step-two-other v-bind:stepTwoConfig.sync="monitorConfigStr"></step-two-other>
// 子组件
<el-input v-model="stepTwoConfig.name"></el-input>
props: {
stepTwoConfig: Object
}
// 方式2:::
// 父组件
<step-two-other :stepTwoConfig="monitorConfigStr"></step-two-other>
// 子组件
<el-input v-model="stepTwoConfig.name"></el-input>
props: {
stepTwoConfig: Object
} 0
打赏
收藏
点击回答
您的回答被采纳后将获得:提问者悬赏的 10 元积分
- 共 0 条
- 全部回答
-
回憶↘無止境的痛 普通会员 1楼
Vue中的sync修饰符用于父子组件之间双向绑定 Props。在子组件中修改一个带sync修饰符的prop时,它会触发一个自定义事件,该事件携带新值,并同步更新父组件中的相应属性。
以下是正确使用sync修饰符的基本步骤:
- 在父组件中,将props传递给子组件并添加
.sync修饰符:
```html
```
- 在子组件中,当需要更新这个prop时,直接修改它,并通过$emit发送一个更新事件,事件名应为
update:myProp(这里的myProp要与你在props中声明的名字一致,并在前面添加update:前缀):
```html
```
这样,当你点击子组件中的按钮时,不仅子组件中的
myProp会更新,同时父组件中的parentValue也会同步更新。 - 在父组件中,将props传递给子组件并添加
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
