vue 父组件如何修改子组件中的date学习笔记

在项目开发中，需要在父组件中触发函数，自动修改子组件中的data值，来实现子组件的显隐效果。比如父组件中点击某个按钮，如何能修改对应子组件中的值，控制它的显隐呢。通过学习，使用vue的ref参数进行实现。

父组件代码

<template>
    ...
    <button @click="changeChildValue">Change</button>
    <children ref="child"></children>
    ...
</template>
 
<script>
import children from "./children"
 
export default {
    methods: {
        changeChildValue() {
            this.$refs.child.isVisible= true;    
        }
    }
}
</script>

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

子组件代码

<script>
export default {
    data() {
        isVisible: false,
    }
}
</script>