父组件
<template>
<div>
<Child :obj="obj" />
</div>
<template>
<script>
import Child from './Child '
export default{
components: {Child },
data() {
return {
obj:{
a:1,
b:2
}
}
}
}
</script>
子组件
<template>
<button @click="changeObj" />
</template>
<script>
export default {
props: {
obj: {
type: Object,
default: () => {}
}
},
methods:{
changeObj(){
this.obj.a = 100
}
}
}
</script>
注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
虽然可以实现子组件修改父组件值,但这种方法官方是不推荐的。
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解
。
额外的,每次父级组件发生变更时