vue3 学习笔记10 -- 父子传参

vue3 学习笔记10 – 父子组件传参和组件间通信

父子组件之间的传参

父子组件之间的传参可以通过属性(prop)和事件(event)来实现

使用属性(props)传递数据

在子组件中定义 props

• 在子组件中使用 defineProps 来定义接收的属性

// children.vue

在父组件中传递参数

• 在父组件中使用子组件的标签，并通过属性传递数据：

  // parent.vue
        
        

defineEmits 使用事件进行通信

• 在子组件中定义事件
  • 在子组件中，使用 defineEmits 定义事件，并通过 emit 方法触发事件

// children.vue

• 在父组件中监听事件
  • 在父组件中监听子组件触发的事件，并处理数据或者触发相应的方法。

  // parent.vue
        
        

组件间的通信

如果需要在多层级的组件中进行数据传递，可以使用provide 和 inject API。

• 在父组件中提供数据:

• 在子组件中注入数据: