vue2完成父组件向子组件

Vue 2 中，父组件向子组件传递数据通常有以下几种方法：

1. Props（属性）：这是最常用的方式，父组件通过 `props` 向子组件传递数据。在父组件模板中，通过 `v-bind` 绑定属性到 `<child-component :prop="value">`，然后子组件就能通过 `$props.prop` 访问这个值。

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

2. Events（事件）：父组件可以触发自定义事件并传递数据，子组件通过 `$on` 监听这些事件并在接收到数据后处理。

// 父组件
this.$emit('custom-event', { data: 'From Parent' });

// 子组件
methods: {
  handleCustomEvent(eventData) {
    console.log('Received:', eventData.data);
  }
},
mounted() {
  this.$on('custom-event', this.handleCustomEvent);
}

3. Provide/Inject：如果需要在多个子组件间共享数据，可以使用 `provide` 和 `inject`。父组件提供数据，子组件注入。

// 父组件
export default {
  provide() {
    return {
      globalData: this.globalData,
    };
  },
  data() {
    return { globalData: 'Shared Data' };
  }
};

// 子组件
inject(['globalData']), // 注入 globalData
data() {
  return {};
}

4. Vuex：当应用规模较大，需要管理全局状态时，可以使用 Vuex。父组件通过 `mapState` 或者直接操作 store 来获取和改变数据。

无论哪种方式，都需要确保父组件不会修改从子组件传回的数据，因为这是单向数据流原则的一部分。