0
点赞
收藏
分享

微信扫一扫

Vue中如何进行非父子组件通信?

当谈及Vue中非父子组件通信时,我们通常会考虑使用Event Bus或者Vuex来实现。以下是我为您准备的一些面试题内容和示例代码:

面试题:“Vue中如何进行非父子组件通信?”

在Vue中,父子组件之间的通信通常是通过propsemit进行的。但是当需要进行非父子组件之间的通信时,我们可以使用以下方式:

1. Event Bus (事件总线)

Event Bus是一种简单但强大的 Vue 实例用于事件派发与监听的组件通信方式。

// main.js
import Vue from 'vue'
export const EventBus = new Vue();

// ComponentA.vue
<template>
    <button @click="sendData">Send Data</button>
</template>

<script>
import { EventBus } from '@/main.js';

export default {
    methods: {
        sendData() {
            EventBus.$emit('data-sent', 'Hello from Component A');
        }
    }
}
</script>

// ComponentB.vue
<template>
    <div>{{ receivedData }}</div>
</template>

<script>
import { EventBus } from '@/main.js';

export default {
    data() {
        return {
            receivedData: ''
        }
    },
    created() {
        EventBus.$on('data-sent', (data) => {
            this.receivedData = data;
        });
    }
}
</script>

2. Vuex

Vuex是Vue.js应用程序开发的状态管理模式,用于管理应用程序中的所有组件的状态。

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        data: ''
    },
    mutations: {
        setData(state, payload) {
            state.data = payload;
        }
    }
});

// ComponentA.vue
<template>
    <button @click="sendData">Send Data</button>
</template>

<script>
export default {
    methods: {
        sendData() {
            this.$store.commit('setData', 'Hello from Component A');
        }
    }
}
</script>

// ComponentB.vue
<template>
    <div>{{ receivedData }}</div>
</template>

<script>
export default {
    computed: {
        receivedData() {
            return this.$store.state.data;
        }
    }
}
</script>

通过以上示例代码,我们可以看到使用Event Bus和Vuex在Vue中非父子组件通信变得非常简单和方便。当面试官提出这个问题时,您可以清晰地解释这两种方式的实现原理,并且展示您在实际编码中的熟练程度。

希望这篇博客对您有所帮助!祝您面试顺利!

更多面试题请点击:web前端高频面试题【共78课时】_前端技术课程-51CTO学堂

最后问候亲爱的朋友们,并诚挚地邀请你们阅读我的全新著作。

Vue中如何进行非父子组件通信?_示例代码

举报

相关推荐

0 条评论