父组件:
<son :num.sync="num"></son>
子组件:
<script>
export default {
props: {
num: {
type: Number,
default: 1
}
},
methods: {
addNum() {
this.$emit('update:num',10);//如果变量是驼峰,应该使用驼峰形式
}
}
}
</script>
本文讨论了在Vue框架中,如何处理子组件试图直接修改从父组件接收到的props值的问题。通常不建议子组件直接改变props,因为这会破坏组件的单向数据流原则,导致数据管理混乱。正确的做法是通过使用emit触发事件来通知父组件进行状态更新。
父组件:
<son :num.sync="num"></son>
子组件:
<script>
export default {
props: {
num: {
type: Number,
default: 1
}
},
methods: {
addNum() {
this.$emit('update:num',10);//如果变量是驼峰,应该使用驼峰形式
}
}
}
</script>
1398
6168
3148

被折叠的 条评论
为什么被折叠?