vue里面的父子组件通信(props方式)

第一种方式

father.vue

<template>
    <div>
        <h4>父组件</h4>
        <child :FatherData="fatherData"></child>
    </div>
</template>

<script>
import Child from './child.vue'
export default {
    components: {
        Child
    },
    data() {
        return {
            fatherData: '父组件的值',
            testData: '我是父组件传递给子组件的值'
        }
    }
}
</script>

child.vue

<template>
    <div>
        <h4>{{FatherData}}</h4>
    </div>
</template>

<script>
export default {
    props: {
        FatherData: {
            type: String,
            required: true
        }
    }
}
</script>