vue 父组件如何修改子组件中的data数据

在项目开发中，需要在父组件中触发函数，自动修改子组件中的data值，来实现子组件的data数据的变化。使用vue的ref参数就可以实现了。

父组件代码部分

<template>
    <div>
      <button @click="changeChildValue">点击改变子组件的data值</button>
      <children ref="child"></children>
    </div>
</template>
 
<script>
import children from "./children"
 
export default {
    components:{
    children
    },
    methods: {
        changeChildValue() {
            this.$refs.child.isName= '我是小红';    
        }
    }
}
</script>

这里的this.$refs.child获取的是子组件的实例对象，然后通过.isName获取该子组件实例对象的值，在父组件中设置isName的值为'我是小红'，那么实际的子组件中data的isName的值也修改成了'我是小红'。

子组件代码部分 children.vue

<template>
    <div>
      <div>{{isName}}</div>
    </div>
</template>
<script>
export default {
    data() {
        isName: '我不是黄蓉',
    }
}
</script>