vue中父组件改变子组件中的data

父组件：father.vue

<template>
    ...
    <button @click="changeChild">Change</button>
    <children ref="child"></children>
    ...
</template>

<script>
import children from ".../children"

export default {
    methods: {
        changeChild() {
            this.$refs.child.childData = true;    // 这句很重要
        }
    }
}
</script>

子组件：children.vue

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

效果：

在父组件中有一个按钮，点击这个按钮可以改变子组件 children 中的 childData 的值变为 true。