Vue3组件间通信——父子传值、方法调用

Vue3组件间关系

实际业务开发过程中，一定会用到组件间通信，如父子组件通信、兄弟组件通信、爷孙组件通信，还有一些全局通信的场景
组件间关系可见下图：
本篇主要详解父子组件通信

父子组件传值常用方式

父子组件传值是开发过程中使用最多也是必掌握的方式 具体可以分为以下三种：

• 1.props/emits方式
• 2.v-model/emits方式
• 3.ref/emits方式

1.props/emits方式

父传子

父组件中引入子组件，然后在子组件上绑定需要传给子组件的值

<template>
  <Child
    title="用户信息"
    :index="1"
    :uid="userInfo.id"
    :to-parent="getChilderVal"
  />
</template>

子组件通过props接收,

const props = defineProps<{
   
    index: string
    uid: number
  }>()

子组件使用接收的值

const {
   index,uid}=toRefs(props)

子传父

子组件定义emits，通过给子组件绑定一个事件触发emits：

const emits = defineEmits(['toParent'])
const selectChange = (id: number) => {
   
  emits('toParent', id)
}

父组件通过getChilderVal接收：</