数据传递

在Vue 2中，父子组件之间的数据传递和事件通信是核心概念。下面是详细的总结：

父组件向子组件传值（Props）

父组件通过props向子组件传递数据。props是子组件用来接收来自父组件数据的自定义属性。

父组件中：

<template>
  <child-component :some-prop="value"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value: '这是要传递的数据'
    };
  }
};
</script>

子组件中定义props接收数据：

<script>
export default {
  props: ['someProp'],
  mounted() {
    console.log(this.someProp); // 输出：这是要传递的数据
  }
};
</script>

子组件向父组件传值（事件）

子组件可以通过$emit触发事件，并将数据作为参数传递给父组件。

子组件中：

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('custom-event', '来自子组件的数据');
    }
  }
};
</script>

父组件中监听这个事件：

<template>
  <child-component @custom-event="handleCustomEvent"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log(data); // 输出：来自子组件的数据
    }
  }
};
</script>

单向数据流

Vue 强调单向数据流，即props的改变应该只能由父组件来进行。如果子组件想要修改通过props传递过来的数据，它应当：

使用这个prop的值来初始化一个局部变量（data属性），然后修改这个局部变量。
或者，通过事件发送消息给父组件来请求更新prop。

非父子组件通信

对于非父子组件之间的通信，可以使用如下方式：

事件总线（Event Bus）：创建一个全局的 Vue 实例用作事件中心，各个组件可以使用这个事件中心来触发和监听事件。
Vuex：使用一个全局的状态管理库来管理不同组件之间的状态共享和通信。

提供/注入机制（Provide/Inject）

Vue 还提供了一个依赖注入机制，允许祖先组件向其所有的后代注入一个依赖，无论组件层次有多深，并在起上下游关系成立的时间里始终生效。

祖先组件中：

<script>
export default {
  provide() {
    return {
      forDescendants: '来自祖先组件的信息'
    };
  }
};
</script>

后代组件中：

<script>
export default {
  inject: ['forDescendants'],
  mounted() {
    console.log(this.forDescendants); // 输出：来自祖先组件的信息
  }
};
</script>

这些是Vue 2中父子组件之间传值和传事件的基本方法。在实际开发中，应根据实际场景和需求选择合适的通信方式。