当前位置:首页 > 技术文章 > 正文内容

「 VUE3 + TS + Vite 」父子组件间如何通信?

zonemu3个月前 (07-08)技术文章59

组件之间传值,大家都很熟悉,涉及到 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 = 1
defineExpose({
  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>

相关文章

Vue基础(vue基础组件文件名符合规范的是)

Vue 是什么,它的核心特点有哪些?Vue 是一款渐进式 JavaScript 框架,它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助开发者用...

vue 3 学习笔记 (八)——provide 和 inject 用法及原理

在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传...

程序员效率提升!使用自动化工具gitx,每周节约半小时

你是否经历过这样的折磨?一个 JIRA 需求要同时修复 dev、qa、staging 三个分支每个版本涉及 A、B、C 三个项目手动执行以下操作:从 dev 切临时分支cherry-pick 提交推送...

(在线编辑DWG)网页CAD二开实现焊接符号绘制

前言在工程制图和制造领域,焊接符号(Welding Symbols)是用于表示焊缝类型、尺寸、位置以及工艺要求的标准化图形语言。广泛应用于机械设计、钢结构、船舶制造、压力容器等行业中,帮助技术人员理解...

「云原生」Containerd ctr,crictl 和 nerdctl 命令介绍与实战操作

一、概述作为接替Docker运行时的Containerd在早在Kubernetes1.7时就能直接与Kubelet集成使用,只是大部分时候我们因熟悉Docker,在部署集群时采用了默认的dockers...