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

转载

原文地址：https://blog.csdn.net/romeo12334/article/details/81947824

父组件：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。