使用 $emit 将数据从一个组件传递给所有组件，而无需在 VueJS 中使用 @click答案

【问题标题】：Pass data from one component to all with $emit without using @click in VueJS使用 $emit 将数据从一个组件传递给所有组件，而无需在 VueJS 中使用 @click
【发布时间】：2017-08-01 10:03:16
【问题描述】：

尝试学习 vuejs 我遇到了一个问题，即如何使用 $emit 但不使用任何 @click 将任何数据从一个组件传递给所有组件。有可能在不使用点击的情况下，数据只是可用并随时获取？

假设我们有这个带有普通 @click 和 $emit 的示例。

main.js

export const eventBus = new Vue()

你好.vue

<template>
  <div>
    <h2>This is Hello component</h2>
    <button 
      @click="emitGlobalClickEvent()">Click me</button>
  </div>
</template>
<script>
import { eventBus } from '../main'
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    emitGlobalClickEvent () {
      eventBus.$emit('messageSelected', this.msg)
    }
  }
}
</script>

用户.vue

<template>
  <div>
    <h2>This is User component</h2>
    <user-one></user-one>
  </div>
</template>
<script>
  import { eventBus } from '../main'
  import UserOne from './UserOne.vue'
  export default {
    created () {
      eventBus.$on('messageSelected', msg => {
        console.log(msg)
      })
    },
    components: {
      UserOne
    }
  }
</script>

UserOne.vue

<template>
  <div>
      <h3>We are in UserOne component</h3>
  </div>
</template>
<script>
  import { eventBus } from '../main'
  export default {
    created () {
      eventBus.$on('messageSelected', msg => {
        console.log('From UserOne message !!!')
      })
    }
  }
</script>

我想收到这条消息：欢迎使用 Hello.vue 在所有组件中使用您的 Vue.js 应用程序，但如果可能的话，不要使用 @click。

【问题讨论】：

向儿童提供数据的常用方法是通过props
只要使用 Vuex。使用数据创建 vuex 存储，将其注入 vue 实例，在所有组件中，您可以将这些数据读取为 this.$store - 不再需要道具。

标签： vue.js

【解决方案1】：

您可以创建另一个 Javascript 文件，其中包含具有初始状态的对象。类似于您在组件中定义数据的方式。

在此文件中，您导出您的对象并将其导入需要访问此共享状态的所有组件中。类似这样的东西：

import Store from 'store';

data() {
  return {
    store
  }
}

这可能会有所帮助：

https://vuejs.org/v2/guide/state-management.html

此时，如果您的应用程序变得更加复杂，您可能还会开始检查 Vuex，它有助于跟踪您商店内部的变化（突变）。

给定的示例是非常简单的 Vuex 版本。

【讨论】：