父传子的数据的时候 子直接修改父传的数据会报错 可以使用.sync修饰符 子传父的时候 父组件可以少写一个方法
父组件
<!-- <demo :money="money" @update:money="f1"></demo> -->
<demo :money.sync="money" :visible.sync="visible"></demo>
<script>
data() {
return {
visible: false,
money: 100,
}
},
f1(e) {
this.money = e
},
</script>
子组件
<template>
<div>
dome 父传来的数据{{money}}<button @click="handel">money</button>
</div>
</template>
<script>
export default {
name: 'Demo',
props: ['money'],
methods: {
handel() {
// this.money = 200 //直接修改报错
this.$emit('update:money', 200)
this.$emit('update:visible', 11111)
},
},
}
</script>
打个比方,如下代码需要两部才能实现上述功能:1.向子组件传值;2.接收子组件回调的值
//父组件传值
<demo :visible="visible" :money="money" @update:aa="fn1"></demo>
//子组件回调
methods: {
fn () {
this.$emit('update:aa', 200)
}
}
使用sync语法糖后,父组件不需要单独声明一个方法,只需要在回调时声明一个update绑定的回调函数(这个绑定值是传值自身)
这样在父组件中就不需要再次定义回调函数进行接收了。
//父组件中的使用sync语法糖,传递和接收参数
<demo :visible.sync="visible" :money.sync="money"></demo>
//子组件中使用update绑定参数的方法进行回调
methods: {
fn () {
this.$emit('update:money', 200)
this.$emit('update:visible', true)
}
}
//父组件中的使用sync语法糖,传递和接收参数
<demo :visible.sync="visible" :money.sync="money"></demo>
//子组件中使用update绑定参数的方法进行回调
methods: {
fn () {
this.$emit('update:money', 200)
this.$emit('update:visible', true)
}
}
————————————————
版权声明:本文为CSDN博主「MMNHD」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_63327154/article/details/125653111