vue3-父子组件间通信

qq_45438471

已于 2023-03-25 13:53:01 修改

阅读量3.7k

点赞数 2

文章标签： javascript vue.js 前端

于 2023-03-22 12:38:12 首次发布

本文链接：https://blog.csdn.net/qq_45438471/article/details/129691991

版权

文章目录

方案一：props/emits
- props：父组件->子组件
- emits：子组件->父组件
方案二：v-model/ emits
方案三：ref/emits
应用场景

在实际业务开发的过程中，我们时常会遇到组件间的通信问题，比如：父子组件间通信、同级组件间通信等。本篇文章中主要介绍父子组件间通信。父子组件间通信主要有以下常见形式：

方案	父组件向子组件	子组件向父组件
props/emits	props	emits
v-model/emits	v-model	emits
ref/emits	ref	emits

不再说明！！！父组件->Parent.vue；子组件->Children.vue，并且代码主要展示template和script部分

方案一：props/emits

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

props：父组件->子组件

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

// Children.vue
<script>
export default defineComponent({
  // 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	函数；例如：钩子函数、箭头函数和普通函数等
Promise	Promise类型的函数
Symbol	Symbol类型的值

支持的配置选项有：

选项	类型	含义
type	string	类型
required	boolean	是否必传，true是必传，false为可传
default	any	与type类型相对应的默认值。若required为false但不设置默认值，则默认为undefined
validator	function	自定义验证函数，需要return一个布尔值，true为校验通过，false为校验不通过。校验不通过时，控制台会抛出警告信息

然后在父组件Parent.vue中调用子组件，通过属性的方式“: 变量名= ”绑定在标签上。来看以下代码：

// Parent.vue
<script>
import { defineComponent } from 'vue'
// 引入子组件Children.vue
import Children from '@./Children.vue'
interface Member {
  id: number
  name: string
}
export default defineComponent({
  // 需要启用子组件作为模板
  components: {
    Children,
  },
  setup() {
    const userInfo: 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'
interface Member {
  id: number
  name: string
  age: number
}
export default defineComponent({
  components: {
    Children,
  },
  setup() {
    const userInfo: Member = reactive({
      id: 1,
      name: 'Petter',
      age: 0,
    })
    /**
     * 声明一个更新年龄的方法
     * @param name, age - 新的名字和新的年龄，由子组件触发 emits 时向父组件发送信号
     */
    function updateInfo({ 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>
export default defineComponent({
  // emits: ['update-info']
  // 先定义emits对象
  emits: {
    // 需要校验
    'update-info': (name: string, age: number) => {
      // 写一些条件拦截，返回 `false` 表示验证不通过
      if (age < 18) {
        console.log('未成年人不允许参与')
        return false
      }
      // 通过则返回 `true`
      return true
    },
    // 若无需校验的，设置为 `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'
interface Member {
  id: number
  name: string
  age: number
}
export default defineComponent({
  setup() {
    // 通知父组件将年龄设置为 `18`和将姓名设置为`Tom`
    const userInfo: 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>
export default defineComponent({
  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'
export default defineComponent({
  name: 'Children',
  setup() {
    const valueRef = ref('')
    // 该函数可以接受父级传递一个参数，并修改valueRef的值
    const acceptValue = (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'
export default defineComponent({
  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>