vue3-父子组件间通信

文章目录

在实际业务开发的过程中，我们时常会遇到组件间的通信问题，比如：父子组件间通信、同级组件间通信等。本篇文章中主要介绍父子组件间通信。父子组件间通信主要有以下常见形式：
方案父组件向子组件子组件向父组件props/emitspropsemitsv-model/emitsv-modelemitsref/emitsrefemits
不再说明！！！父组件->Parent.vue；子组件->Children.vue，并且代码主要展示template和script部分

方案一：props/emits

  props/emits是最常用的形式，也是最基础的方案。其主要过程是：
1、父组件->子组件：子组件先定义props对象并渲染到标签里，然后在父组件中调用子组件，通过属性的方式“: 变量名= ”绑定在标签上。
2、子组件->父组件：父组件先声明数据变量和更新函数然后通过“@函数名= ”绑定事件，然后子组件通过emits向父组件发送更新信号，一般伴随着数据变量。

props：父组件->子组件

首先要在子组件Children.vue定义props对象并且使用。我们先来看一下下面的代码：

// Children.vue<script>exportdefaultdefineComponent({// props: ['title', 'index', 'userName', 'uid']props:{// 可选，并提供默认值title:{type: String,required:false,default:'默认标题',},// 默认可选，单类型index: Number,// 添加一些自定义校验userName:{type: String,// 在这里校验用户名必须至少 3 个字validator:(v)=> v.length >=3,},// 默认可选，但允许多种类型uid:[Number, String],},// 在这里需要添加一个入参setup(props){// 该入参包含了当前组件定义的所有 props
    console.log(props)},})</script><template>// 渲染父组件传递过来的值<p>标题：{{ title }}</p><p>索引：{{ index }}</p><p>用户id：{{ uid }}</p><p>用户名：{{ userName }}</p></template>

  虽然可以将变量一并装在一个string[]数组里，但是更推荐封装在对象里，因为vue3支持对props进行类型限制和一些配置，这样在实际开发中不会造成格式混乱。如果传入不正确的类型，会抛出警告信息。例如父组件向子组件传递一个日期，如果不做类型限制的话可能会导致页面渲染失败。
其中支持的类型有：
类型含义String字符串Array数组Boolen布尔值Object对象Date日期Function函数；例如：钩子函数、箭头函数和普通函数等PromisePromise类型的函数SymbolSymbol类型的值
支持的配置选项有：
选项类型含义typestring类型requiredboolean是否必传，true是必传，false为可传defaultany与type类型相对应的默认值。若required为false但不设置默认值，则默认为undefinedvalidatorfunction自定义验证函数，需要return一个布尔值，true为校验通过，false为校验不通过。校验不通过时，控制台会抛出警告信息
然后在父组件Parent.vue中调用子组件，通过属性的方式“: 变量名= ”绑定在标签上。来看以下代码：

// Parent.vue<script>import{ defineComponent }from'vue'// 引入子组件Children.vueimport Children from'@./Children.vue'interfaceMember{id: number
  name: string
}exportdefaultdefineComponent({// 需要启用子组件作为模板components:{
    Children,},setup(){constuserInfo: Member ={id:1,name:'Petter',}return{
      userInfo,}},})</script><template><Children
    title="用户信息":index="1":uid="userInfo.id":user-name="userInfo.name"/></template>

emits：子组件->父组件

首先父组件Parent.vue声明数据变量和定义更新函数然后通过“@事件名称=更新函数 ”绑定事件。看下面代码：

// Parent.vue<script>import{ defineComponent, reactive }from'vue'import Children from'@./Children.vue'interfaceMember{id: number
  name: string
  age: number
}exportdefaultdefineComponent({components:{
    Children,},setup(){constuserInfo: Member =reactive({id:1,name:'Petter',age:0,})/**
     * 声明一个更新年龄的方法
     * @param name, age - 新的名字和新的年龄，由子组件触发 emits 时向父组件发送信号
     */functionupdateInfo({ name, age }: Member){// 当 `name` 变化时更新 `name` 的值if(name && name !== userInfo.name){
            userInfo.name = name
          }// 当 `age` 变化并且新值在正确的范围内时，更新 `age` 的值if(age >0&& age !== userInfo.age){
            userInfo.age = age
          }// 显示新的名字和新的年龄alert({ name, age })},return{
      userInfo,
      updateInfo,}},})</script><template><Child @update-info="updateInfo"/></template>

然后子组件Children.vue通过emits向父组件发送更新信号，一般伴随着数据变量。来看下面代码：

// Children.vue<script>exportdefaultdefineComponent({// emits: ['update-info']// 先定义emits对象emits:{// 需要校验'update-info':(name: string,age: number)=>{// 写一些条件拦截，返回 `false` 表示验证不通过if(age <18){
        console.log('未成年人不允许参与')returnfalse}// 通过则返回 `true`returntrue},// 若无需校验的，设置为 `null` 即可。例如：'update-name': null},// 使用 setup 第二个参数 context 里的 emit 方法触发setup(props,{ emit }){// 通知父组件将年龄设置为 `18`和将姓名设置为`Tom`emit('update-info',{name:'Tom',age:18,})},})</scirpt><template><div @click="undate-info">发送给父组件</div></template>

  和 props 一样，可以指定是一个数组，把要接收的 emit 事件名称写进去；但是相同的使用对象可以更好管理数据。emits最少要传递一个参数：事件名称。事件名称是在子组件书写。
  上述代码的事件名称是指父组件 Parent.vue 绑定事件时 @update-info=“updateInfo” 里的 update-info ，如果改成 @hello=“updateInfo” ，那么事件名称就需要使用 hello ，一般情况下事件名称和更新函数的名称会保持一致，方便维护。
  同时，emits也支持传递多个参数，第二个参数可以使用对象修饰数据。
  emits可以进行一些校验操作，方法如下emits:{ 事件名称(key): 函数(val) => { return 布尔值 }}，详情看上述代码。

TIPS:
1、官方文档推荐对 camelCase 风格（小驼峰）命名的 props 和emits，但在绑定时使用和 HTML attribute 一样的 kebab-case 风格（短横线），例如使用 user-name 代替 userName 传递，详见官网的传递 props和emits的细节 一节。

方案二：v-model/ emits

  事实上，v-model与props的配置差不多，那为什么要用v-model呢？主要体现在父组件->子组件上。
  在上述的讲解中可以看出，方案props/emits中，子组件向父组件传递数据，父组件必须声明一个更新函数并绑定事件给子组件，才能更新数据。而使用方案v-model/emits则无需父组件声明函数就能更新数据。具体改动如下：

// Parent.vue<template><Children
    v-model:uid="userInfo.id"
    v-model:username="userInfo.name"
    v-model:age="userInfo.age"/></template><script>import{ defineComponent, reactive }from'vue'import Children from'@./Children.vue'interfaceMember{id: number
  name: string
  age: number
}exportdefaultdefineComponent({setup(){// 通知父组件将年龄设置为 `18`和将姓名设置为`Tom`constuserInfo: Member =reactive({id:1,name:'Petter',age:0,}),onMounted(()=>{
      console.log(userInfo.id, userInfo.name,userInfo.age)}),return userInfo
  },})</script>

想要绑定多个数据，可以使用多个v-model；
格式：<组件 v-model: 子组件中定义的变量名称=父组件定义的变量名称></组件>

// Children.vue<script>exportdefaultdefineComponent({props:{uid: Number,username: String,age: Number,},// 注意这里的 `update:` 前缀emits:['update:uid','update:username','update:age'],})</script><template>// 渲染父组件传递过来的值<p>用户id：{{ uid }}</p><p>用户名：{{ username }}</p><p>年龄：{{ age }}</p></template>

子组件中emits属性格式需要转变成：emits: [update: 父组件v-model属性名/子组件定义的变量名称。]

方案三：ref/emits

props和v-model主要是值的传递，而使用ref还可以操作子组件的方法

  除了方案一、二之外，我们还可以使用方案三ref/emits。主要改动也是体现在父组件->子组件上，且进一步简化了操作。我们只需要在父组件上声明一个响应式对象，而无需再像上面两个方案上一样，需要父组件调用子组件时在子组件上绑定一个ref属性，然后就能对子组件的属性和方法进行操作，这样会简化代码。具体操作如下：
  首先，子组件上声明响应式变量，然后在setup函数内return变量。只有return了父组件才能调用，否则父组件无法获取。

// Children.vue<template>// 渲染从父组件Parent.vue接受到的值<div> Children:{{ valueRef }}</div></template><script lang="ts">import{ defineComponent, ref }from'vue'exportdefaultdefineComponent({name:'Children',setup(){const valueRef =ref('')// 该函数可以接受父级传递一个参数，并修改valueRef的值constacceptValue=(value: string)=>(valueRef.value = value)return{
      acceptValue,
      valueRef
    }}})</script>

  然后父组件Parent.vue使用空的响应式对象来操作子组件的响应式对象，并且调用子组件时在其标签上绑定ref属性。

// Parent.vue<template><div>childrenRef</div><button @click="sendValue">send</button>// 这里ref接受的字符串，要setup返回的ref类型的变量同名<Children ref="childrenRef"/></template><script lang="ts">import{ defineComponent, ref }from'vue'import Children from'./Children.vue'exportdefaultdefineComponent({name:'Parent',components:{
    Children
  },setup(){// 如果ref初始值是一个空，可以用于接受一个实例// vue3中获取实例的方式和vue2略有不同const childrenRef = ref<typeof Children>()// 请保证视图渲染完毕后再执行操作onMounted(()=>{// 可以拿到Children组件实例，并调用其setup返回的所有信息
      console.log(childrenRef.value)// 通过调用子组件实例的方法，向其传递数据
      childrenRef.value.acceptValue('123456')// 也可以去操作子组件的数据
      childrenRef.value.valueRef ='8888';});// 必须return出去才可以给到template使用return{
      childrenRef,}}})</script>

  ref()其实是将变量变成一个对象，以键值对存储{ 变量名key：值value}。子组件实例本身就以键值对形式存储，而子组件中的响应式对象的存储形式又是键值对，故父组件调用子组件的响应式对象的格式是：响应式对象.value.子组件响应式对象。
  emits的改动请参考方案二。

应用场景

知道原理后，我们要回到实际开发应用中去：一般情况下
1、父组件->子组件：父组件发起 AJAX 请求，拿到数据后，再根据子组件的渲染需要传递不同的 props 给不同的子组件使用。
2、子组件->父组件：更新表单等数据量较多时非常好用。