vue 父子组件传值

在 Vue.js 中，父子组件间的通信主要通过 Props 和自定义事件（$emit）来进行。以下是两种方式的详细说明：

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

父组件向子组件传递数据：

• 父组件通过在其模板中声明子组件标签，并使用 v-bind 或简写 : 绑定属性来传递数据给子组件。

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent :parentMessage="messageFromParent" />
  </div>
</template>

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

export default {
  data() {
    return {
      messageFromParent: 'Hello from Parent',
    };
  },
  components: {
    ChildComponent,
  },
};
</script>

• 子组件通过在其 props 选项中声明接受的属性来接收父组件传递过来的数据。

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    {{ parentMessage }}
  </div>
</template>

<script>
export default {
  props: {
    parentMessage: String, // 可以是任意类型，如 String, Number, Array, Object, Function 等
  },
};
</script>

2. 子组件向父组件传值（$emit）

子组件向父组件传递数据：

• 子组件通过触发自定义事件 $emit 将数据传递给父组件。

<!-- 子组件 ChildComponent.vue -->
<template>
  <button @click="sendDataToParent">Click to send data</button>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const childData = 'Hello from Child';
      this.$emit('child-to-parent', childData); // 触发事件并传递数据
    },
  },
};
</script>

• 父组件监听子组件发出的自定义事件，并在事件回调函数中处理数据。

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent 
      :parentMessage="messageFromParent"
      @child-to-parent="handleChildData"
    />
  </div>
</template>

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

export default {
  data() {
    return {
      messageFromParent: 'Hello from Parent',
      receivedFromChild: '',
    };
  },
  methods: {
    handleChildData(data) {
      this.receivedFromChild = data; // 接收子组件传递的数据
    },
  },
  components: {
    ChildComponent,
  },
};
</script>

此外，对于复杂的场景还可以考虑使用以下方式：

• Vuex（状态管理库）：用于管理共享状态，适用于多个组件之间或者层级较深的组件间的数据交互。
• Provide/Inject：Vue 提供的依赖注入机制，可以在没有直接父子关系的组件间传递数据。
• EventBus（事件总线）：创建一个全局事件总线实例，用于非父子组件间的通信，但随着 Vue3 的到来，这种方式逐渐不再推荐，转而推荐使用 Vuex 或组合式 API 中的 Pinia 进行状态管理。