vue组件通信

// 父组件parent.vue
<template>
    <child :sendInfo="info"></child>
</template>
<script>
import Child from ‘@/components/Child.vue‘
export default {
    components: {
        ‘child‘: Child
    },
    data() {
        return {
            info: "hello"
        }
    }
}
</script>

// 子组件child.vue
<template>
    <span>{{sendInfo}}</span>
</template>
<script>
export default {
    props:["sendInfo"],
    data() {
        return {
            
        }
    }
}
</script>

// 子组件child.vue
<template>
    <span @click="sendEvent">子组件向父组件</span>
</template>
<script>
export default {
    data() {
        return {
            msg: "love",
        }
    },
    methods:{
        sendEvent() {
            this.$emit("sendMsg", this.msg)
        }
    }
}
</script>

// 父组件parent.vue
<template>
    <child v-on:sendMsg="receiveEvent"></child>
</template>
<script>
import Child from ‘@/components/Child.vue‘
export default {
    components: {
        ‘child‘: Child
    },
    data() {
        return {
            
        }
    },
    methods:{
        receiveEvent(data) {
            console.log(data)
        }
    }
}
</script>