vue如何在父组件种修改子组件的状态

Vue官方建议使用props和emit来实现父子组件之间的通信。具体来说，可以在父组件中通过props将需要修改的子组件状态传递给子组件，子组件通过$emit方法触发父组件的事件从而完成状态的修改。

示例代码：

// 父组件
<template>
<div>
<ChildComponent :childProp="parentProp" @childEvent="handleChange"/>
</div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
components: {
ChildComponent
},
data() {
return {
parentProp: 'parentValue'
}
},
methods: {
handleChange(value) {
this.parentProp = value
}
}
}
</script>

// 子组件
<template>
<div>
<button @click="handleClick">点击修改父组件状态</button>
</div>
</template>

<script>
export default {
props: {
childProp: {
type: String,
required: true
}
},
methods: {
handleClick() {
const value = 'childValue'
this.$emit('childEvent', value)
}
}
}
</script>

在上面的例子中，父组件中通过props将parentProp传递给了子组件ChildComponent，并监听了子组件的childEvent事件，当子组件触发该事件时，调用handleChange方法修改父组件的parentProp状态。子组件中通过$emit方法触发了childEvent事件，并传递了需要修改的状态值value。