vue2组件之间传值

在Vue 2中，组件之间传递数据主要有以下几种方式：

1. props（属性）：这是最常见的方式，父组件通过props向子组件传递数据。父组件将数据作为props定义，然后在子组件里接收并使用这些数据。父子组件之间的数据单向流动，避免了副作用。

// 父组件
<template>
  <child-component :data="parentData"></child-component>
</template>

<script>
export default {
  data() {
    return {
      parentData: 'Hello from Parent'
    };
  }
};
</script>

// 子组件
<template>
  <p>{{ data }}</p>
</template>

<script>
export default {
  props: ['data']
};
</script>

2.事件（$emit）：子组件可以触发自定义事件，将数据传递给父组件，然后父组件监听这个事件并在回调函数中处理数据。

// 子组件
<template>
  <button @click="$emit('customEvent', 'Child Data')">
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('customEvent', 'Child Data');
    }
  }
};
</script>

3. Vuex：当数据量大或者复杂的状态管理需求时，可以使用状态管理模式Vuex，它提供了一种全局共享的状态树。

4. 自定义指令：Vue允许自定义全局或局部的指令来简化组件间的通信，但相对复杂，主要用于特殊场景。

5. Vuex中的actions：对于更复杂的操作，可以在Vuex的actions中处理数据并异步更新状态，然后再通过mutations通知组件更新视图。

每种方式都有其适用的场景，根据项目的需求和规模选择合适的方式来管理组件间的数据交互。