前端流行框架Vue3教程：17. _组件数据传递

_组件数据传递

我们之前讲解过了组件之间的数据传递，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状态管理