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。