腦補 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>