_组件数据传递

我们之前讲解过了组件之间的数据传递，props 和自定义事件 两种方式

• props：父传子
• 自定义事件：子传父
• 除了上述的方案，props也可以实现子传父

一、项目结构

src/
└── components/
    ├── ComponentsA.vue  # 父组件
    └── ComponentsB.vue  # 子组件

二、子组件(ComponentsB.vue)解析

<script>
export default {
  data() {
    return {}
  },
  props: {
    onEvent: Function  // 接收父组件传递的函数
  }
}
</script>

<template>
  <h3>ComponentsB</h3>
  <p>{{ onEvent('传递数据') }}</p>  <!-- 调用父组件函数并传递参数 -->
</template>

三、父组件(ComponentsA.vue)解析

<script>
import ComponentsB from "@/components/ComponentsB.vue";

export default {
  components: {
    ComponentsB  // 注册子组件
  },
  data() {
    return {
      message: ''  // 用于接收子组件传递的数据
    }
  },
  methods: {
    dataFn(data) {  // 子组件调用的方法
      this.message = data
    }
  }
}
</script>

<template>
  <h3>ComponentsA</h3>
  <p>父元素：{{ message }}</p>  <!-- 显示子组件传递的数据 -->
  <ComponentsB :onEvent="dataFn"/>  <!-- 绑定方法到子组件属性 -->
</template>

四、通信原理图解

1. 父组件通过:绑定方法到子组件属性 onEvent
2. 子组件通过 props 接收这个函数
3. 子组件中调用 onEvent('传递数据') 直接触发父组件方法
4. 父组件的 dataFn 方法被调用，更新 message 数据
5. 模板中的 {{ message }} 被更新显示

五、关键点说明

• 父组件通过 props 向子组件传递函数
• 子组件可以直接在模板中调用这个函数并传递参数
• 父组件的方法可以直接操作组件状态(message)
• 这种方式实现了子组件向父组件传值的单向通信

六、扩展建议

• 可以添加类型检查：prop: { type: Function, required: true }
• 可以添加错误处理，在子组件中检查函数是否存在
• 对于复杂场景可以考虑使用事件总线或Vuex状态管理