Vue3 父子组件传参通信的完整指南

在 vue 开发中，组件化是重要的开发方式。但组件之间经常需要共享数据和交互，这时候组件通信就变得很关键。父子组件通信是最常用的场景，比如按钮组件点击后要通知父组件，或者表单组件需要从父组件获取数据。

Props：父组件向子组件传递数据

Props 是父组件向子组件传递数据的主要方式。可以把 Props 想象成函数的参数，父组件传递数据，子组件接收数据。

父组件传递数据的方法：

<template>
  <ChildComponent :message="parentMessage" :count="totalCount" />
</template>

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

const parentMessage = ref('来自父组件的消息')
const totalCount = ref(10)
</script>

子组件接收数据的方法：

<template>
  <div>
    <p>{{ message }}</p>
    <p>计数器：{{ count }}</p>
  </div>
</template>

<script setup>
// 定义 Props
const props = defineProps({
  message: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

Props 的特点：

单向数据流：数据只能从父组件传到子组件
类型检查：可以指定接收的数据类型
默认值：可以设置默认值
必需性：可以标记某些 Props 必须传递

自定义事件：子组件向父组件通信

当子组件需要向父组件传递信息时，可以使用自定义事件。这种方式让子组件能够通知父组件发生了某些事情。

子组件触发事件的方法：

<template>
  <button @click="handleClick">点击按钮</button>
  <input :value="inputValue" @input="handleInput" />
</template>

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

const emit = defineEmits(['button-clicked', 'input-changed'])
const inputValue = ref('')

const handleClick = () => {
  emit('button-clicked', '按钮被点击了')
}

const handleInput = (event) => {
  inputValue.value = event.target.value
  emit('input-changed', inputValue.value)
}
</script>

父组件监听事件的方法：

<template>
  <ChildComponent 
    @button-clicked="handleButtonClick"
    @input-changed="handleInputChange"
  />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

const handleButtonClick = (message) => {
  console.log('收到子组件的消息：', message)
}

const handleInputChange = (newValue) => {
  console.log('输入框内容变了：', newValue)
}
</script>

v-model：简化双向数据绑定

v-model 是 Props 和自定义事件的简化写法，让双向数据绑定更简单。

传统写法（使用 Props + 事件）：

<!-- 父组件 -->
<template>
  <CustomInput 
    :modelValue="searchText"
    @update:modelValue="newValue => searchText = newValue"
  />
</template>

<!-- 子组件 -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

使用 v-model 的简洁写法：

<!-- 父组件 -->
<template>
  <CustomInput v-model="searchText" />
</template>

<!-- 子组件 -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

Vue3 支持多个 v-model 绑定：

<!-- 父组件 -->
<template>
  <UserForm 
    v-model:name="userName"
    v-model:email="userEmail"
    v-model:age="userAge"
  />
</template>

<!-- 子组件 -->
<template>
  <input :value="name" @input="$emit('update:name', $event.target.value)" />
  <input :value="email" @input="$emit('update:email', $event.target.value)" />
  <input :value="age" @input="$emit('update:age', $event.target.value)" />
</template>

<script setup>
defineProps(['name', 'email', 'age'])
defineEmits(['update:name', 'update:email', 'update:age'])
</script>

使用 Props 的注意事项

设计 Props 时要遵循这些原则：

保持简单：避免传递复杂的对象
明确接口：使用 TypeScript 或详细定义 Props
合理默认值：为可选 Props 提供合适的默认值

常见问题处理：

问题1：直接修改 Props

<!-- 错误做法 -->
<script setup>
const props = defineProps(['user'])
props.user.name = '新名字' // 这样会报错！
</script>

<!-- 正确做法 -->
<script setup>
const props = defineProps(['user'])
const localUser = ref({ ...props.user })
localUser.value.name = '新名字' // 这样可以
</script>

问题2：监听深层 Props 变化

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

const props = defineProps(['config'])

// 监听整个 config 对象的变化
watch(
  () => props.config,
  (newConfig) => {
    console.log('配置发生变化', newConfig)
  },
  { deep: true }
)
</script>

性能优化建议

减少不必要的重新渲染：

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

const props = defineProps(['items', 'filter'])

// 使用 computed 缓存计算结果
const filteredItems = computed(() => {
  return props.items.filter(item => 
    item.name.includes(props.filter)
  )
})
</script>

控制事件触发频率：

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

const emit = defineEmits(['search'])
const searchText = ref('')

// 防抖搜索，避免频繁触发事件
let timeoutId
const handleSearch = (value) => {
  searchText.value = value
  clearTimeout(timeoutId)
  timeoutId = setTimeout(() => {
    emit('search', searchText.value)
  }, 300)
}
</script>

组合式 api 的优势

Vue3 的组合式 API 让组件通信更灵活：

<script setup>
import { useCart } from '../composables/useCart'

// 在多个组件中共享相同的业务逻辑
const { cartItems, addToCart, removeFromCart } = useCart()
</script>

实际应用场景

表单组件：父组件传递初始值，子组件在用户输入时通过事件更新数据
列表组件：父组件传递列表数据，子组件在操作项时通过事件通知父组件
模态框组件：父组件控制显示状态，子组件在关闭时通过事件通知父组件

调试技巧

在开发过程中，可以使用这些方法调试组件通信：

<script setup>
// 在子组件中打印 Props
const props = defineProps({...})
console.log('收到的 Props:', props)

// 监听事件触发
const emit = defineEmits(['my-event'])
const handleAction = () => {
  console.log('准备触发事件')
  emit('my-event', data)
}
</script>

总结

父子组件通信是 Vue 开发的基础。掌握 Props、自定义事件和 v-model 的使用方法，能够帮助你构建复杂的应用程序。根据具体场景选择合适的方法，可以让代码更清晰、更易维护。

记住这些要点：

数据流从父组件到子组件使用 Props
子组件向父组件传递信息使用自定义事件
双向数据绑定使用 v-model
复杂的业务逻辑可以使用组合式 API 抽离

通过合理使用这些通信方式，你可以创建出结构清晰、易于维护的 Vue 应用程序。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13040