vue组件通信

Posted 2020-10-27 因为是你的笔记呀

1.父组件向子组件通信（porps）

// 父组件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>

2.子组件向父组件通信（this.$emit和v-on）

// 子组件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>

3.任意组件之间通信（bus）

详见  http://www.cnblogs.com/sangzs/p/8472327.html

4.其他通信方式(refs)