如何在 Vue.js 2 中轻松地在兄弟组件之间进行通信？

Question

首先，我应该说我是 Vue.js 2 的新手，但到目前为止我喜欢它。我正在使用最新版本。

我已经开始构建我的第一个更大的应用程序，但马上就遇到了一个情况，我有一个主要的

app

组件和应用程序组件内的2个不同的兄弟组件。

<template>

    <div>
        <comp1></comp1>
        <comp2></comp2>
    </div>

</template>

<script>

    import Comp1 from './Comp1'
    import Comp2 from './Comp2'

    export default
    {
        components:
        {
            Comp1,
            Comp2
        },
        data: function()
        {
            return {
                
            }
        }
    }

</script>

这是 Comp1 的样子：

<template>
    
    <div>
        <ul>
            <li @click="doClick(data)">Component 1</li>
        </ul>
    </div>

</template>

<script>
    
    export default
    {
        data: function()
        {
            return {
                data: 123
            }
        }
    }

</script>

...这里是 Comp 2：

<template>
    
    <div>
        <ul>
            <li>Component 2: { newData }</li>
        </ul>
    </div>

</template>

<script>
    
    export default
    {
        data: function()
        {
            return {
                newData: null
            }
        },
        methods:
        {
            doClick(data)
            {
                this.newData = data;
            }
        }
    }

</script>

我想做的是，在

Comp1

上触发doClick事件并在Comp2上处理它。

达到预期结果的最有效方法和最佳实践是什么？我需要 Vuex 还是只需要以某种方式发出事件？

Answer 1

您可以尝试在 vuex 和事件总线中搜索。

视图： https://vuex.vuejs.org/

事件总线： https://v3-migration.vuejs.org/breaking-changes/events-api.html