vue3 父子组件传值 理论

Vue3 中父子组件之间的数据传递主要有以下几种方式：

1. **props（属性）**：这是最常见的方式，父组件通过`props`向下传递数据给子组件。父组件创建子组件时，可以在`<child>`标签内定义需要从父组件接收的数据，并设置`v-bind`或简写`:`绑定到对应的 props 上。子组件只能读取props，不能修改，除非父组件显式地允许。

<!-- 父组件 -->
<template>
  <div>
    <child :message="parentMessage"></child>
  </div>
</template>

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

2. **自定义事件（$emit）**：子组件可以通过`$emit`触发一个自定义事件，并将数据作为参数发送给父组件。父组件需要监听这个事件并处理接收到的数据。

<!-- 子组件 -->
<template>
  <button @click="$emit('update:message', 'New message from Child')">
    Send Message
  </button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('update:message', 'Child sent a message');
    }
  }
};
</script>

3. **ref（响应式引用）**：适用于更复杂的场景，如双向数据绑定。当子组件需要修改的状态需要回流给父组件时，可以使用`ref`并配合`setup()`函数里的`reactive`或`ref`。

4. **提供自定义计算属性**：如果数据需要经过一定的计算才能得出，父组件可以直接暴露一个计算属性供子组件访问。

5. **Vuex（状态管理）**：对于应用级别的状态管理，可以使用Vuex，它让父子组件共享状态变得更容易。

在实际项目中，选择哪种方式取决于需求的复杂度和性能考虑。