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接收：

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

const getChilderVal=(id:number)=>{
console.log(id)}

2.v-model/emits方式

对比 props / emits ，这个方式更为简单：

• 在 Father.vue ，通过 v-model 向 Child.vue 传值
• Child.vue 通过自身设定的 emits 向 Father.vue 通知数据更新

父传子

父组件直接通过v-model传值给子组件:

<template><Child
    v-model:user-name="userInfo.name"
  /></template>

子组件同理通过props接收：

const props = defineProps<{
    userName: string
  }>()

子传父

子组件通过"update"字段即可：

const emits = defineEmits(['update:userName'])
emits('update:userName')

3. ref/emits方式

ref 是可以用在 DOM 元素与子组件上面，所以，父组件也可以直接通过对子组件绑定 ref 属性，然后通过 ref 变量去操作子组件的数据或者调用里面的方法

父传子

比如导入了一个 Child.vue 作为子组件，需要在 template 处给子组件标签绑定 ref：
子组件：

<template><Child ref="child" /></template>

父组件：
给子组件定义一个ref变量

    const child = ref<HTMLElement>(null);

 // 执行子组件里面的ajax函数
    child.value.getList();

// 打开子组件里面的弹窗
    child.value.isShowDialog =true;

子传父

子组件如果想主动向父组件通讯，也需要使用 emit，此处就不再重复讲解

父子组件方法相互调用

子组件调用父组件中方法

父组件：

<template><div><child :parent-handler="parentHandler" /></div></template><script lang="ts" setup>import child from "@/components/child";

const parentHandler=()=>{
  console.log("这是父组件的方法");}</script>

子组件：

<template><div><button @click="handler">这是子组件的按钮</button></div></template><script lang="ts" setup>

const props = defineProps<{
    parentHandler: Function
  }>()};
//使用
props.parentHandler()</script>

父组件调用子组件中方法

父组件：

<template><div class="mt-5"><Son ref="RefChilde"></Son><div class="btn btn-primary my-2" @click="fnCallChild">
      点我调用Son组件里的方法
    </div></div></template><script lang="ts" setup>import Son from "../components/Son.vue";
    const RefChilde = ref();     //RefChilde 要和Son组件上的class名相同
    const fnCallChild =()=>{
      RefChilde.value.sonFn();      //sonFn是子组件里的方法
    };</script>

子组件：

<template><div><h1>{{ conts }}</h1></div></template><script lang="ts" setup>
    const conts = ref("我是子组件");
    const sonFn =()=>{
      conts.value ="我被父组件里调用了子组件的方法修改了数据";};</script>