Question

尝试学习vuejs我遇到了如何将任何数据从一个组件传递到所有组件的问题，使用$ emit但不使用任何@click。有可能一些数据如何可用并随时抓取它而不使用点击？

假设我们有正常的@click和$ emit这个例子。

main.js

 icon.innerHTML='<i class="fa fa-wifi" aria-hidden="true"></i>';

Hello.vue

icon.innerHTML="<i class='fa fa-wifi' aria-hidden='true'></i>";

User.vue

export const eventBus = new Vue()

UserOne.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>

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

Answer 1

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

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

import Store from 'store';

data() {
  return {
    store
  }
}

这可能会有所帮助：

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

此时，如果您的应用程序在复杂性方面的增长更多，您可能还会开始查看Vuex，这有助于跟踪商店内部的变化（突变）。

给定的示例对于Vuex的过度简化版本至关重要。

使用$ emit将数据从一个组件传递到所有组件而不使用VueJS中的@click

1 个答案: