VueJS 2-如何轻松地在兄弟组件之间进行通信？

Question

首先，我应该说我是VueJS 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还是只需要以某种方式发出事件？