在 vuejs2 中的组件之间传递数据的最佳方式答案

【问题标题】：Best way for passing data between components in vuejs2在 vuejs2 中的组件之间传递数据的最佳方式
【发布时间】：2020-12-03 18:10:24
【问题描述】：

在 2 个不同组件之间访问数据的最佳方式是什么？

用例：在组件 1 上，用户单击一个按钮，生成一个随机数并存储到变量：data_out。为了使示例简单，我没有包含生成随机数的方法。现在，在组件 2 上，我想动态捕获这个数字 (data_out variable)，我正在构建一个数据表来显示每个数字。

export default {
  name: 'DatatablePage',
    data() {
        return {
           data_out: '123'
   }
  }
}

【问题讨论】：

组件之间的关系如何？他们是父母/孩子吗？兄弟姐妹？完全不相关？

标签： vue.js vuejs2

【解决方案1】：

根据您的组件层次结构以及您是否乐于使用状态管理（例如 Vuex），通常有三种方法可以处理此问题。

父/子

子组件发出事件到它们的父组件

<!-- parent -->
<template>
  <Child @random-number-generated="captureRandomNumber"/>
</template>
<script>
export default {
  data: () => ({ numbers: [] }),
  methods: {
    captureRandomNumber (num) {
      this.numbers.push(num)
    }
  }
}
</script>

<!-- child -->
<template>
  <button type="button" @click="$emit('random-number-generated', Math.random())">
    Generate random number
  </button>
</template>

兄弟姐妹

与父/子通信非常相似，可以使用兄弟组件的父级来协调数据，方法是在一些子级上监听事件并在其他子级上传递道具或调用方法

<!-- parent -->
<template>
  <Child1 @some-event="handleEvent"/>
  <Child2 :prop-name="values"/>
  <Child3 ref="child3"/>
</template>
<script>
export default {
  data: () => ({ values: [] }),
  methods: {
    handleEvent (payload) {
      this.values.push(payload) // will reactively update the Child2 "propName" value
      this.$refs.child3.someMethod(payload) // call a method on Child3
    }
  }
}
</script>

Event Bus

如果您的组件没有层次相关，则可以使用此选项。您可以创建一个新的Vue 实例来充当事件总线，也可以使用$root 实例。

通过$emit发布活动

// event bus
EventBus.$emit('event-name', payload)

// root instance
this.$root.$emit('event-name', payload)

并通过$on订阅活动

// event bus
EventBus.$on('event-name', handlerFunction)

// root instance
this.$root.$on('event-name', handlerFunction)

商店

最后，有一个Vuex Store 形式的集中管理状态，其中数据由组件提交 mutations（同步）或调度 actions 更改（异步）并且订阅者通过映射到 state 或 getters 来对更改做出反应。

组件只需位于同一根 Vue 实例下。他们的关系没有其他要求。

【讨论】：