Vue3 + TS + Vite 父子组件间如何通信?

开发 前端
在父组件内给子组件传值时,通过 V-Bind 绑定一个数据,然后子组件使用 DefineProps 接收数据。

组件之间传值,大家都很熟悉,涉及到 VUE3 +TS 好多同学就无从下手了,所以分享这篇文章,希望看完后提起 VUE3+TS 能够不慌不忙。

平时使用的函数如:ref、reactive、watch、computed 等需要先引入才能使用,但是本篇文章介绍的 defineProps、withDefaults、defineEmits、defineExpose 都是开箱即用的函数,无需引入。

父向子传值:defineProps

在父组件内给子组件传值时,通过 v-bind 绑定一个数据,然后子组件使用 defineProps 接收数据。

可以传递的数据有两种:字符串类型 和 非字符串类型。字符串类型不需要 v-bind,非字符串需要使用 v-bind,可以简写成冒号(:)。

/*  父组件代码 */<template>  父组件  <child-com title="父组件向子组件传值" :list="list"></child-com></template><script lang="ts" setup>import ChildCom from './component/ChildCom.vue'const list: Array<number> = [1, 2, 3, 4, 5]</script>

子组件接收的时候使用 defineProps,需要注意的是我们使用 TS 需要加类型限制,如果不是 TS 的可以直接使用。

TS 语法使用:

defineProps<{title: string;  data: number[]}>()

非 TS 语法使用:

defineProps({title: {    default: "",    type: string  },  list: Array})

对应上边父组件传值,使用 TS 语法接收的子组件代码为:

<template>  子组件  {{ title }}  {{ list }}</template><script lang="ts" setup>interface DefineProp {  title: string  list: Array<number>}defineProps<DefineProp>()</script>

默认值:withDefaults

在非 TS 语法中,default 可以设置默认值,在 TS 语法中,如何设置默认值呢?

withDefaults 是一个无需引入开箱即用的函数,可以接收两个参数,第一个用于defineProps 接收参数,第二个参数是一个对象用于设置默认值。

使用方式1:分离模式

type Props = {title?: string;  list?: number[]}withDefaults(defineProps<Props>(), {title: "默认值",  list: () => [1, 2]})

使用方式2:组合模式

widthDefault(defineProps<{ title?: string, list?: number[] }>(),  {title: "默认值",  list: () => [1, 2]})

给上边的子组件添加默认值代码如下:

<template>  子组件  <br />  {{ title }}  <br />  {{ list }}</template><script lang="ts" setup>interface DefineProp  {  title?: string  list?: Array<number>}withDefaults(defineProps<DefineProp>(), {  title: '设置title默认值',  list: () => [1, 2],})</script>

将父组件中传的值删除掉之后,发现设置的默认值就展示出来了。

子向父传值:defineEmits

子组件给父组件进行传值时,都是通过派发事件,去触发父组件中的事件并接收值。

在子组件绑定一个 @click 事件,然后通过 defineEmits 注册自定义事件,当点击 @click 事件时触发 emit 去调用注册事件,然后传递参数。

非 TS 声明语法

// clickname 父组件自定义事件名let emit = defineEmits([ 'clickname' ])const postV = () => {emit('clickname', '传递的值或变量')}

TS 声明语法

// clickname 父组件自定义事件名let emit = defineEmits<{(e: 'clickname', str: string): void}>()const postV = (str: string): void => {emit('clickname', str)}

如果是多个自定义事件,写法如下:

type Person = {  name: string  age: number}let emit = defineEmits<{  (e: 'clickname', str: string): void  (e: 'getData', per: Person): void}>()const postV = (str: string): void => {emit('clickname', str)}const postVData = (per: Person): void => {emit('getData', per)}

我们在子组件内,使用 defineEmits 添加派发事件:

<template>  子组件  <button @click="postV">子向父传值</button>  <button @click="postVal('传递字符串')">子向父传data</button></template><script lang="ts" setup>import { reactive } from 'vue'// 子向父传值type Person = {  name: string  age: number}const per = reactive<Person>({  name: 'qq',  age: 18,})const emit = defineEmits<{  (e: 'clickname', per: Person): void  (e: 'getData', data: string): void}>()const postV = (per: Person): void => {  emit('clickname', per)}const postVal = (data: string): void => {  emit('getData', data)}</script>

父组件内使用自定义事件,接收子组件传递来的数据:

<template>  父组件  <child-com    @clickname="getChildVal"    @getData="getChildData"  ></child-com></template><script lang="ts" setup>iimport ChildCom from './component/ChildCom.vue'const getChildVal = (per: { name: string; age: number }): void => {  console.log('per:', per)}const getChildData = (data: string): void => {  console.log('data', data)}</script>

defineExpose

子组件向父组件传值时,除了使用 defineEmits 之后,也可以使用 defineExpose ,它是通过把组件自己的属性暴露出去,父组件先获取到子组件,再获取属性值。

defineExpose 接收一个对象参数,包含需要传递的属性。

defineExpose({name,  count,  ....})

在子组件内,定义和暴露需要传递的属性:

<template>  子组件</template><script lang="ts" setup>const count: number = 1defineExpose({  count,})</script>

在父组件内使用 ref 获取到子组件,然后打印属性:

<template>  父组件  <child-com ref="child"></child-com>  <button @click="getProp">获取子组件属性</button></template><script lang="ts" setup>import ChildCom from './component/ChildCom.vue'import { ref } from 'vue'const child: HTMLElement = ref()const getProp = (): void => {  console.log(child.value.count)}</script>
责任编辑:姜华 来源: 今日头条
相关推荐

2024-01-09 08:34:56

Vue3.js组件通信

2022-07-28 08:26:18

Vue3Uni-appVite

2022-08-26 10:01:48

Vue3TS

2022-03-11 12:31:04

Vue3组件前端

2023-11-28 09:03:59

Vue.jsJavaScript

2022-08-15 07:34:36

vite项目Vue3

2022-12-12 08:56:45

Vite3Vite

2024-01-23 09:15:33

Vue3组件拖拽组件内容编辑

2019-05-29 14:23:53

Vue.js组件通信

2020-12-01 08:34:31

Vue3组件实践

2022-07-29 11:03:47

VueUni-app

2023-04-18 09:17:40

父子组件Vue

2024-08-13 09:26:07

2021-12-01 08:11:44

Vue3 插件Vue应用

2021-12-02 05:50:35

Vue3 插件Vue应用

2021-05-18 07:51:37

Suspense组件Vue3

2024-10-18 10:49:03

Actions异步函数

2023-04-02 10:06:24

组件vue3sign2.

2021-09-15 08:09:43

前端技术编程

2019-05-15 08:00:00

vue组件间通信前端
点赞
收藏

51CTO技术栈公众号