VueJS 2.0 从父级到子级的通信

Question

我确信有一种简单的方法可以做到这一点，但我想不通。

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

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

单击该按钮运行以下方法：

new Vue({
    el: '#root',
    methods: {
        showModal() { Event.$emit('showModal'); },
    }
});

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

Vue.component('modal', {

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

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

我是 VueJS 的新手，正在尝试弄清楚如何在 Vue 中进行通信。我似乎无法弄清楚下一步。当单击按钮时，我需要做什么才能将 isActive 设置为 true？

感谢您提供的任何帮助。

一切顺利，

莫舍

Answer 1

在你的 main.js 中（或者你实例化你的 Vue 应用程序的地方）

您可以使用普通的 vue 实例作为事件总线

Vue.prototype.bus = new Vue();

这样你就可以这样使用它了：

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

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

以我在 github 上的一个 vue 项目为例，我经常使用 eventbus。 https://github.com/wilomgfx/vue-weather

还可以查看这个关于 VueJS 2 的免费惊人系列，它真的很棒： https://laracasts.com/series/learn-vue-2-step-by-step

使用操作问题的完整示例：

https://codepen.io/wilomgfx/pen/OpEVpz?editors=1010

Answer 2

要从父母与孩子交流，您可以使用components props。

如果您有更深入的交流（父母与 little-little...-child 交流），您可以使用 @WilomGfx 提到的 busEvent。

父母与孩子沟通的代码：

Vue.component('modal', {
    template: '<div :class="[ modalClass, {\'is-active\' : isActive }]">' +
            'Hello Word !' +
        '</div>',
    data() {
        return {
            modalClass: 'modal'
        }
    },
    props: {
    	isActive: { type: Boolean, default: false }
    }
});

new Vue({
    el: '#root',
    data() {
      return {
        isActive: false,
      }
  },
  methods: {
    showModal() {this.isActive = true },
  }
});

.is-active {
  color: red;
}

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="root">
  <modal :is-active="isActive"></modal>
  <button @click="showModal">Show Modal (going red when prop isActive is true)</button>
</div>