子传父的核心应用场景（vue3） - 教程

我们常见的组件通信的方式是prop和emit，下面我们来探讨一下什么场景下使用子传父。

子传父的核心场景是：子组件产生了“需要父组件响应”的事件或数据，但子组件自身无法（或不应该）处理，必须交给父组件决策/存储/分发。

父传子是“数据下行”（父给子展示用），子传父是“事件/数据上行”（子告诉父“我发生了什么”，让父处理）。以下是最常见的场景，带具体例子和简单实现思路：

一、最核心场景：子组件的用户交互，需要父组件处理逻辑

子组件是“交互载体”（比如按钮、输入框、表单），用户操作子组件后，子组件本身不知道要做什么业务逻辑，必须通知父组件执行。

1. 按钮/开关的“触发事件”

• 场景：子组件是一个自定义按钮（比如“提交按钮”“删除按钮”），用户点击后，触发了子组件的事件：如提交表单、删除操作等，但是子组件不知道要提交什么、删除什么，需要父组件执行提交API、删除数据等逻辑。
• 例子：
  • 子组件（MyButton）：只负责渲染按钮，点击时触发父组件传来的回调。
  • 父组件：接收点击事件，执行“提交表单”的逻辑。
• 简单代码：

<!-- 子组件 MyButton.vue --><template><button @click="handleClick"> {{ btnText }} </button></template><script setup>import { defineProps, defineEmits } from 'vue';const props = defineProps({btnText: {type: String,required: true}});const emit = defineEmits(['click']);const handleClick = () => {emit('click');};</script><!-- 父组件 Parent.vue --><template><MyButton btnText="提交" @click="submitForm" /></template><script setup>import MyButton from './MyButton.vue';const submitForm = () => {// 调用API提交数据、跳转页面等操作};</script>

2. 输入框/选择器的“数据回传”

• 场景：子组件是一个自定义输入框（比如“搜索输入框”“日期选择器”），用户输入/选择后，子组件需要把输入的值传给父组件，父组件可能用这个值做搜索、筛选、存储等。
• 例子：
  • 子组件（MyInput）：负责输入框渲染，输入时把值传给父组件。
  • 父组件：接收输入值，执行“搜索数据”的逻辑。
• 简单代码：

<!-- 子组件 MyInput.vue --><template><inputtype="text":value="modelValue"@input="handleInput"placeholder="请输入搜索关键词"/></template><script setup>import { defineProps, defineEmits } from 'vue';const props = defineProps({modelValue: {type: String,default: ''}});const emit = defineEmits(['update:modelValue']);const handleInput = (e) => {const inputValue = e.target.value;emit('update:modelValue', inputValue);};</script><!-- 父组件 Parent.vue --><template><MyInput v-model="searchKey" /><button @click="searchData">搜索</button><p>搜索关键词: {{ searchKey }}</p></template><script setup>import { ref } from 'vue';import MyInput from './MyInput.vue';const searchKey = ref('');const searchData = () => {// 调用API搜索数据...};</script>

3. 表单提交的“数据汇总”

• 场景：子组件是一个完整表单（比如“用户注册表单”“商品编辑表单”），用户填写完成后点击提交，子组件收集所有表单字段的值，传给父组件，父组件处理API提交、数据校验等。
• 例子：
  • 子组件（UserForm）：收集姓名、年龄等字段，提交时把表单数据传给父。
  • 父组件：接收表单数据，执行“注册用户”的API请求。

二、子组件状态变化，需要父组件同步

子组件自身管理了一些状态（比如折叠/展开、选中状态），但父组件需要知道这个状态（比如父组件的标题要根据子组件的折叠状态变化，或父组件要根据子组件的选中状态更新其他UI）。

1. 折叠面板/抽屉的“状态同步”

• 场景：子组件是一个折叠面板（比如“筛选条件面板”），用户点击展开/收起时，子组件需要把“是否展开”的状态传给父组件，父组件可能要显示/隐藏其他元素（比如“展开时显示重置按钮，收起时隐藏”）。
• 简单代码：

<!-- 子组件 CollapsePanel.vue --><template><div class="panel"><div class="header" @click="toggleCollapse">{{ title }}<span>{{ isCollapsed ? '展开' : '收起' }}</span></div><div class="content" v-show="!isCollapsed">面板内容...</div></div></template><script setup>import { ref, defineProps, defineEmits } from 'vue';const props = defineProps({title: {type: String,required: true},collapsed: {type: Boolean,required: true}});const emit = defineEmits(['update:collapsed']);const isCollapsed = ref(props.collapsed);// 监听 props 变化，同步到内部状态watch(() => props.collapsed, (newVal) => {isCollapsed.value = newVal;});const toggleCollapse = () => {isCollapsed.value = !isCollapsed.value;emit('update:collapsed', isCollapsed.value);};</script><!-- 父组件 Parent.vue --><template><CollapsePanel title="筛选条件" v-model:collapsed="isPanelCollapsed" /><button v-show="!isPanelCollapsed" @click="resetFilter">重置筛选</button></template><script setup>import { ref } from 'vue';import CollapsePanel from './CollapsePanel.vue';const isPanelCollapsed = ref(true);const resetFilter = () => {console.log('父组件：重置筛选条件');};</script>

2. 选项卡/分页的“切换事件”

• 场景：子组件是一个分页组件（比如“商品列表分页”），用户点击“下一页”时，子组件需要把“当前页码”传给父组件，父组件根据页码请求对应页的数据。
• 例子：
  • 子组件（Pagination）：管理页码、每页条数，页码变化时通知父。
  • 父组件：接收页码，请求对应页的商品数据。

三、子组件需要“反向控制”父组件的UI/数据

子组件的某个操作，需要父组件改变自身的状态（比如父组件的弹窗显示/隐藏、父组件的数据源更新）。

1. 弹窗的“关闭事件”

• 场景：子组件是一个弹窗（比如“提示弹窗”“确认弹窗”），用户点击“关闭”或“取消”时，子组件需要通知父组件“我要关闭了”，父组件控制弹窗的v-show或v-if状态。
• 简单代码：

<!-- 子组件 MyModal.vue --><template><div class="modal" v-if="modelValue"><div class="modal-content"><h3>弹窗标题</h3><p>弹窗内容...</p><button @click="handleClose">关闭</button></div></div></template><script setup>import { defineProps, defineEmits } from 'vue';const props = defineProps({modelValue: {type: Boolean,required: true}});const emit = defineEmits(['update:modelValue', 'close']);const handleClose = () => {emit('update:modelValue', false);emit('close');};</script><!-- 父组件 Parent.vue --><template><button @click="showModal = true">打开弹窗</button><!--使用 v-model 绑定弹窗的显示状态。同时监听 'close' 事件，执行额外的回调。--><MyModal v-model="showModal" @close="onModalClose" /></template><script setup>import { ref } from 'vue';import MyModal from './MyModal.vue';const showModal = ref(false);// 弹窗关闭时的回调const onModalClose = () => {};</script>

2. 子组件触发父组件的数据源更新

• 场景：子组件是一个“新增用户”组件，用户填写完信息提交后，子组件把新增的用户数据传给父组件，父组件把这个数据添加到自己的“用户列表”数据源中，实现列表实时更新。

总结：子传父的核心逻辑

子组件是“执行者”（负责UI渲染和用户交互），父组件是“决策者”（负责业务逻辑、数据存储、全局状态管理）。当子组件发生了“自己处理不了”的事件或数据变化时，就需要通过$emit（Vue）、props回调（React）等方式“上报”给父组件，让父组件处理。

简单记：父传子是“给数据”，子传父是“报事件”。