Javascript VueJS 2.0从父级到子级的通信

我相信有一个简单的方法可以做到这一点，但我想不出来

在我的html文件中，我有以下按钮：

<button @click="showModal">Show Modal</button>

当我点击该按钮时，我希望在模态组件中切换一个类。以下是组件的相关代码：

Vue.component('modal', {

    template: `
        <div :class="[ modalClass, {'is-active' : isActive }]">
            ETC...
        </div>
        `

    data() {
        return {
            isActive: false,
            modalClass: 'modal'
        }
    }

我是VueJS的新手，正在尝试了解如何在Vue中进行通信。我似乎不知道下一步该怎么办。我必须做什么才能在单击按钮时将isActive设置为true

谢谢你能提供的任何帮助

祝你一切顺利

---

Moshe

在main.js中，或者在您实例化Vue应用程序的任何地方

您可以将普通vue实例用作eventbus

Vue.prototype.bus = new Vue();

这样，您就可以这样使用它：

this.bus.$on('event', (params) => {})

this.bus.$emit('event', params)

以我在github上的一个vue项目为例，我经常使用eventbus。

还可以在VueJS 2上查看这个免费的精彩系列，它真的很棒：

使用op问题的完整示例：

---

要在家长和孩子之间进行沟通，您可以使用

如果你有一个更深入的沟通家长与小…-孩子沟通，你可以使用@WilomGfx提到的busEvent

父母与子女之间的沟通代码：

Vue.组件“模态”{ 模板：+ “你好！”+ , 资料{ 返回{ 模态类：“模态” } }, 道具：{ isActive:{type:Boolean，默认值：false} } }; 新Vue{ el:'根'， 资料{ 返回{ I：错， } }, 方法：{ showmodel{this.isActive=true}， } }; .处于活动状态{ 颜色：红色； } 当prop isActive为真时显示模式变红

---

谢谢这肯定很有帮助，但不是我想要的100%。我想知道的是，是否有一种无需向模态标记添加自定义属性即可进行通信的方法。换句话说，我想要这个内容。不是这个：`CONTENT@Moshe这是一个毫无意义的目标，会导致您编写更糟糕的代码。道具是组件接收外部状态的正确方式。如果eventbus适合您，请确定。我向你展示道具是因为我在考虑这个案例：假设你的应用程序中有3个modals组件：你不能使用emit，因为如果你使用它，所有modals都会改变。这看起来很有希望，但我仍然很难弄清楚如何实现它。我应该向模态组件添加什么，以便当我单击按钮时，isActive将设置为true，模态将显示？我用我的代码设置了一个代码笔，以防有帮助：P.S.感谢Laracasts的参考资料-我现在实际上正在浏览这个系列，并同意它很棒。没关系-我找到了它，它工作了！谢谢：。哈哈，好吧！很高兴我能帮忙！。如果你需要更多帮助，你可以在任何地方打电话给我，我在react和vuejs atm中非常活跃。谢谢-我会的。

this.bus.$on('event', (params) => {})

this.bus.$emit('event', params)