脑补 vue中父组件改变子组件中的数据data

需求：
在父组件的一个事件可以改变子组件中的 openData 的值变为 true。

废话不多说，直接上代码：

父级页面：


<template>
  <div>
    <div @click="changeChild">按钮改变子组件数据</div>
    <children ref="childrenDom"></children>
   </div>
</template>
 
<script>
import Childrens from ".../childrens"
export default {
components: {
    Childrens
  },
    methods: {
        changeChild() {
            this.$refs.childrenDom.openData = true
        }
    }
}
</script>

注： this.$refs.childrenDom就是指的childrenDom DOM元素
子组件页面：

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