Vue是如何进行组件通信?-CSDN博客

1.父传子

父组件可以通过props向子组件传递数据或方法，子组件可以通过props接收这些数据或方法。

父组件：

<template>
    <div>
        <ChildComponent :message="parentMessage" />
    </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
    components: {
        ChildComponent,
    },
    data() {
        return {
            parentMessage: 'Hello from parent',
        }
    },
}
</script>

子组件：

<template>
    <div>
        <p>{{ message }}</p>
    </div>
</template>

<script>
export default {
    props: ['message'],
}
</script>

2.子传父

子组件可以通过触发事件向父组件传递数据。在子组件中，可以使用 $emit 方法触发一个自定义事件，并传递数据作为参数。父组件可以通过监听这个事件并定义一个方法来接收数据。

子组件：

<template>
    <button @click="notifyParent">Click Me</button>
</template>

<script>
export default {
    methods: {
        notifyParent() {
            this.$emit('childEvent', 'Hello from child')
        },
    },
}
</script>

父组件：

<template>
    <div>
        <ChildComponent @childEvent="handleChildEvent" />
    </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
    components: {
        ChildComponent,
    },
    methods: {
        handleChildEvent(payload) {
            console.log(payload) // 'Hello from child'
        },
    },
}
</script>

3.兄弟组件

需要创建一个新的Vue实例，并定义一个事件总线。

然后用 $on 和 $emit 对数据进行传输。

$emit用于发送或触发事件和传递数据，而 $on 用于接收和监听事件。

new Vue({
    el: '#app',
    created() {
        this.$bus = new Vue()
    },
})

发布事件：

export default {
    methods: {
        notifyParent() {
            this.$bus.$emit('childEvent', 'Hello from child')
        },
    },
}

监听事件：

export default {
    created() {
        this.$bus.$on('childEvent', this.handleChildEvent)
    },
    methods: {
        handleChildEvent(payload) {
            console.log(payload) // 'Hello from child'
        },
    },
}

4.Vuex

创建一个Vuex Store：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        message: 'Hello from Vuex Store',
    },
    mutations: {
        updateMessage(state, message) {
            state.message = message
        },
    },
})

在父组件中传值：

<template>
    <div>
        <p>{{ message }}</p>
        <button @click="updateMessageInStore">Update Message in Store</button>
        <child-component :message="message" />
    </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
import { mapState, mapMutations } from 'vuex'

export default {
    computed: { ...mapState(['message']) },
    methods: { ...mapMutations(['updateMessage']) },
    components: {
        ChildComponent,
    },
}
</script>

在子组件中接值：

<template>
    <div>
        <p>{{ message }}</p>
    </div>
</template>

<script>
export default {
    props: ['message'],
}
</script>

父组件通过mapState和MapMutation辅助函数使用Vuex Store中的状态和方法。子组件通过props属性接收传递回来的值。当通过updateMessage方法更新Vuex Store中的message状态时，父组件和子组件都会更新。