Vue3 子传父全解析实战

<template>
  <div class="child">
    <h4>我是子组件</h4>
    <!-- 输入框输入内容，触发input事件，传递输入值 -->
    <input 
      type="text" 
      v-model="childInput" 
      @input="handleInput"
      placeholder="请输入要传递给父组件的内容"
    />
    <!-- 按钮点击，传递固定数据 -->
    <button @click="handleClick" style="margin-top: 10px;">
      点击向父组件传值
    </button>
  </div>
</template>

<script setup>
// 1. 声明要触发的自定义事件（数组形式，元素是事件名）
// 可选，但推荐声明：增强代码可读性，IDE会有语法提示，避免拼写错误
const emit = defineEmits(['inputChange', 'btnClick'])

// 子组件内部数据
const childInput = ref('')

// 输入框变化时，触发事件并传递输入值
const handleInput = () => {
  // 2. 触发事件：第一个参数是事件名，第二个参数是要传递的数据（可选，可多个）
  emit('inputChange', childInput.value)
}

// 按钮点击时，触发事件并传递固定对象
const handleClick = () => {
  emit('btnClick', {
    name: '子组件',
    msg: '这是子组件通过点击按钮传递的数据'
  })
}
</script>

<template>
  <div class="parent">
    <h3>我是父组件</h3>
    <p>子组件输入的内容：{{ parentMsg }}</p>
    <p>子组件点击传递的数据：{{ parentData }}</p>
    
    <!-- 3. 监听子组件声明的自定义事件，绑定处理函数 -->
    <Child 
      @inputChange="handleInputChange"
      @btnClick="handleBtnClick"
    />
  </div>
</template>

<script setup>
// 引入子组件
import Child from './Child.vue'
import { ref, reactive } from 'vue'

// 父组件接收数据的容器
const parentMsg = ref('')
const parentData = reactive({
  name: '',
  msg: ''
})

// 4. 处理子组件触发的inputChange事件，接收传递的数据
const handleInputChange = (val) => {
  // val 就是子组件emit传递过来的值（childInput.value）
  parentMsg.value = val
}

// 处理子组件触发的btnClick事件，接收传递的对象
const handleBtnClick = (data) => {
  // data 是子组件传递的对象，直接解构或赋值即可
  parentData.name = data.name
  parentData.msg = data.msg
}
</script>

<script setup>
// 对象形式声明事件，key是事件名，value是校验函数（参数是子组件传递的数据，返回boolean）
const emit = defineEmits({
  // 校验inputChange事件传递的数据必须是字符串
  inputChange: (val) => {
    return typeof val === 'string'
  },
  // 校验btnClick事件传递的数据必须是对象，且包含name和msg属性
  btnClick: (data) => {
    return typeof data === 'object' && 'name' in data && 'msg' in data
  }
})

// 若传递的数据不符合校验，控制台会报警告（不影响代码运行，仅提示）
const handleInput = () => {
  emit('inputChange', 123) // 传递数字，不符合校验，控制台报警告
}
</script>

<!-- 子组件（Child.vue） -->
<template>
  <div class="child">
    <h4>子组件开关</h4>
    <button @click="handleSwitch">
      {{ isOpen ? '关闭' : '打开' }}
    </button>
  </div>
</template>

<script setup>
// 1. 接收父组件通过v-model传递的modelValue
const props = defineProps(['modelValue'])
// 2. 声明update:modelValue事件（固定命名，不可修改）
const emit = defineEmits(['update:modelValue'])

// 子组件内部使用父组件传递的值
const isOpen = computed(() => props.modelValue)

// 开关切换，触发事件，修改父组件数据
const handleSwitch = () => {
  emit('update:modelValue', !isOpen.value)
}
</script>

<!-- 父组件（Parent.vue） -->
<template>
  <div class="parent">
    <h3>父组件：{{ isSwitchOpen ? '开关已打开' : '开关已关闭' }}</h3>
    <!-- 直接使用v-model，无需手动监听事件 -->
    <Child v-model="isSwitchOpen" />
  </div>
</template>

<script setup>
import Child from './Child.vue'
import { ref } from 'vue'

const isSwitchOpen = ref(false)
</script>

<!-- 父组件 -->
<Child 
  v-model:name="parentName" 
  v-model:age="parentAge" 
/>

<!-- 子组件 -->
<script setup>
// 接收多个v-model传递的props
const props = defineProps(['name', 'age'])
// 声明对应的update事件
const emit = defineEmits(['update:name', 'update:age'])

// 触发事件修改父组件数据
emit('update:name', '新名字')
emit('update:age', 25)
</script>

<!-- 子组件（FormChild.vue） -->
<template>
  <div class="form-child">
    <input v-model="form.name" placeholder="请输入姓名" />
    <input v-model="form.age" type="number" placeholder="请输入年龄" />
    <button @click="handleSubmit">提交表单</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const emit = defineEmits(['form-submit'])

const form = reactive({
  name: '',
  age: ''
})

const handleSubmit = () => {
  // 表单校验（简化）
  if (!form.name || !form.age) return alert('请填写完整信息')
  // 提交表单数据给父组件
  emit('form-submit', form)
  // 提交后重置表单
  form.name = ''
  form.age = ''
}
</script>

<!-- 子组件（ModalChild.vue） -->
<template>
  <div class="modal" v-if="visible">
    <div class="modal-content">
      <h4>子组件弹窗</h4>
      <button @click="handleClose">关闭弹窗</button>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(['visible'])
const emit = defineEmits(['close-modal'])

const handleClose = () => {
  // 触发关闭事件，通知父组件隐藏弹窗
  emit('close-modal')
}
</script>

<!-- 子组件（ListChild.vue） -->
<template>
  <div class="list-child">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
      <button @click="handleDelete(item.id)">删除</button>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(['list'])
const emit = defineEmits(['delete-item'])

const handleDelete = (id) => {
  // 传递要删除的id给父组件，由父组件更新列表
  emit('delete-item', id)
}
</script>