Vue3.2+Ts组件之间通信的实现

目录
  • 父子组件通信
    • 1、defineProps
    • 2、defineEmits
    • 3、defineExpose
    • 4、v-model
  • 兄弟组件通信
  • 跨组件通信
    • Provide/Inject

受疫情影响,居家办公有一阵了,最近闲下来开始谈谈自己对于Vue3.2 + TS 知识的理解和使用。今天就总结下项目中常用到的一些组件之间的通信。

vue框架提供了前端开发组件的思想,页面由一个个组件组合而成,在一些大型项目中,组件的数量越来越多,之间也需要通信,接下来我们进入主题,谈谈vue3.x + ts中如何使用组件通信。
(vue3.x中组件之间通信和2基本上差别不大,就是基于ts写法可能有点差别。)

父子组件通信

1、defineProps

Parent

<template>
  <child :count= "countNum" :labels="labels" />
</template>
<script setup lang="ts">
import child from "@/componets/child.vue"
import { ref } from "vue"
const countNum = ref(100);
const labels = ref([])
</script>

Child

<template>
  <div>{{count}}</div>
</template>
<script setup lang="ts">
//这里我们使用typescript的写法
type TData = { count:number,labels:string[] } //声明父组件传过来的数据以及类型
//这种写法无法设定默认值
const props = defineProps<TData>()
//声明默认值的写法
const props = withDefaults( defineProps<TData>(), {
  count:1,
  labels:() => ["默认值1","默认值2"]  //对于复杂数据类型以函数式声明
})
console.log(props.count) // 模版中直接可以获取值
</script>

2、defineEmits

Parent

<template>
  <child @changeHandle="changeHandle" />
</template>
<script setup lang="ts">
import child from "@/componets/child.vue"
const changeHandle = ((e) =>{
  console.log(e)
})
</script>

Child

<template>
  <div @click="btnHandle">按钮点击</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const count = ref(100);
//typescript的写法
type TFn = {
  (e:'changeHandle',value:number) : void
}
const emit = defineEmits<TFn>()
const btnHandle = (() => {
  emit('changeHandle',count)
})
//非typescript的写法
const emit = defineEmits(["changeHandle"])
const btnHandle = (() => {
  emit('changeHandle',count)
})
</script>

3、defineExpose

文档是这么介绍的:

使用 <script setup> 的组件是默认关闭的,也即通过模板 ref 或者 $parent 链获取到的组件的公开实例,不会暴露任何在 <script setup> 中声明的绑定。为了在 <script setup> 组件中明确要暴露出去的属性,使用 defineExpose 编译器宏,(其实可以理解为父组件想获取子组件的内容,子组件通过defineExpose把内容暴露出去)

Parent

<template>
  <child ref="getChild" />
  <div @click="btnHandle">按钮点击</div>
</template>
<script setup lang="ts">
import child from "@/componets/child.vue"
const getChild = ref(null)
const btnHandle = () => {
  //通过ref获取子组件暴露出来的内容
  console.log(getChild.value.count)
  console.log(getChild.value.btnHandle())
}
</script>

Child

<template>
  <div @click="btnHandle">按钮点击</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const count = ref(100);
const btnHandle = () => {
  count++
}
defineExpose({count,btnHandle})
</script>

4、v-model

父子之间通信,有时需要子组件修改父组件传递过来的内容,使用defineProps穿过来的值,进行修改会报错,我在vue2.x中通过watch监听,然后把新值赋值data内自定义属性。
在vue3.x中我们可以通过v-model的传递并可以进行修改值,我们直接操作吧!

<template>
  <A v-model:count="count"></A>
</template>
<script setup lang="ts">
import A from "@/components/A.vue"
import { ref } from "vue"
const count = ref(100);
</script>

<template>
  <div>{{count}}</div>
  <div @click="updateHandle">修改内容</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const props = defineProps<{count:number}>()
//修改
const emit = defineEmits(["update:count"])
const updateHandle = () => {
  emit("update:count",10)
}
</script>

兄弟组件通信

在vue2.x中我们一般用中央事件总线(eventBus)来处理兄弟组件,在vue3中用mitt()来处理兄弟组件之间的通信,实际用法和eventBus是一样的,我们来看看如何实现吧

mitt

第一步安装:

yarn add mitt -S

第二步创建

//在src/utils创建eventBus.ts
import mitt from "mitt"
const mitter = mitt()
default export mitter

第三步使用

//兄弟A组件
<template>
  <div @click="btnHandle">按钮点击</div>
</template>
<script setup lang="ts">
import mitter from "@/utils/eventBus.ts"
import { ref } from "vue"
const count = ref(100)
mitter.emit("count",count.value)
</script>

//兄弟B组件
<template>
  <div @click="btnHandle">按钮点击</div>
</template>
<script setup lang="ts">
import mitter from "@/utils/eventBus.ts"
import { ref } from "vue"
const getCount = ref()
mitter.on("count",(e) => {
  getCount.value = e
})
</script>

跨组件通信

Provide/Inject

往往在业务中会存在跨组件之间的通信,有的同学可能会想到一层层通过defineProps传递,这样是可以实现,但是随着项目的代码量庞大很难做到维护。

//provide 接收两个参数 1、name<String类型> 2、value
<template>
  <A></A> 
</template>
<script setup lang="ts">
import mitter from "@/utils/eventBus.ts"
import A from "@/components/A.vue"
import { provide } from "vue"
const count = ref(190)
provide('count',count.value)
</script>

<!--A组件内的B组件-->
//inject 接收两个参数 1、provide传如果来的name 2、可选参数,提供默认值
<template>
  <div>我是B组件</div>
</template>
<script setup lang="ts">
import mitter from "@/utils/eventBus.ts"
import { inject } from "vue"
const getCount = inject('count',11)
</script>

到此这篇关于Vue3.2+Ts组件之间通信的实现的文章就介绍到这了,更多相关Vue3.2 Ts组件通信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue3与ts组件封装提高代码复用性

    目录 引言 轮播图组件的封装 在pinia中发请求拿到数据 父组件中 在子组件中 引言 对于一名前端程序员来说封装组件是一个必备技能.当我们在日常的工作中总有所用的组件库满足不了需求的情况,这就需要我们有封装组件的基本功了. 封装组件,可以提高我们代码的复用性,提高工作效率,提高代码的可阅读性. 组件我自己的理解的话,分为两种吧,一种是工具类的组件,一种是页面级别的组件,工具类的组件就是说封装后,在以后的项目中如果用相同的应用场景时,可复用.页面类组件的话就是将一个大的页面分成很多的小组件,然后

  • vue3中如何使用ts

    目录 如何使用ts app.vue header.vue list.vue listitem.vue footer.vue 如何使用ts 在创建vue脚手架的时候吧typescript选上 app.vue <template>   <!-- <div id="nav">     <router-link to="/">Home</router-link> |     <router-link to=&quo

  • 使用vue3+TS实现简易组件库的全过程

    目录 前置 组件编写 dropdown form 验证 总结 前置 首先下载vue-cli,搭建我们的环境,vue-create-luckyUi,选择vue3和TypeScript .在src目录下创建package作为组件目录.再安装bootstrap,用bootstrap里面的样式来完成我们的组件. 组件编写 dropdown 首先查看boorstrap文档,是这样用的 <div class="dropdown"> <button class="btn

  • vue3+ts中ref与reactive指定类型实现示例

    目录 ref 的基础特性 如何在ref中指定类型 reactive isRef.isReactive toRef.toRefs.toRaw ref 的基础特性 ref 约等于 reactive({ value: x }) ref() 可以定义时无参数,第一次赋值任意类型,然后就不能增加属性 const refa = ref(6) const rcta = reactive({ value: 12 }) console.log('refa:', refa) //RefImpl{...} conso

  • vue3+ts+vant移动端H5项目搭建的实现步骤

    目录 1.全局安装vue-cli 2.使用vue ui 可视化创建项目 3.打开项目 4.安装vant,并实现按需引入 5.移动端适配(rem) 使用vue-cli搭建项目 1.全局安装vue-cli npm install -g @vue/cli 安装完成验证 vue -V 2.使用vue ui 可视化创建项目 2.1 vue ui vue ui 2.2 点击创建 点击创建 在learn目录下创建项目 填写创建的项目名,选择包管理器npm 2.3 点击下一步 选择手动,点击下一步 2.4 选择

  • Vue3.2+Ts组件之间通信的实现

    目录 父子组件通信 1.defineProps 2.defineEmits 3.defineExpose 4.v-model 兄弟组件通信 跨组件通信 Provide/Inject 受疫情影响,居家办公有一阵了,最近闲下来开始谈谈自己对于Vue3.2 + TS 知识的理解和使用.今天就总结下项目中常用到的一些组件之间的通信. vue框架提供了前端开发组件的思想,页面由一个个组件组合而成,在一些大型项目中,组件的数量越来越多,之间也需要通信,接下来我们进入主题,谈谈vue3.x + ts中如何使用

  • vue组件之间通信实例总结(点赞功能)

    本文实例讲述了vue组件之间通信.分享给大家供大家参考,具体如下: 总结: 父组件-->子组件 ①通过属性 步骤1: <son myName="michael" myPhone='123'></son> <son :myName="userList[0]"></son> 步骤2: Vue.component('son',{ props:['myName','myPhone'] }) ②通过$parent 直接在子

  • 详解Vue组件之间通信的七种方式

    使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下. 父子组件之间的通信 1)props和$emit 父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作 具体代码如下: ``` // 父组件 <template> <div> <h3>props和$emit</h3> <Children v-on:changeMsg="changeMsg"

  • vuejs中父子组件之间通信方法实例详解

    本文实例讲述了vuejs中父子组件之间通信方法.分享给大家供大家参考,具体如下: 一.父组件向子组件传递消息 // Parent.vue <template> <div class="parent"> <v-child :msg="message"></v-child> </div> </template> <script> import VChild from './child.v

  • 详解React中组件之间通信的方式

    一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件 而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信 组件间通信即指组件通过某种方式来传递信息以达到某个目的 二.如何通信 组件传递的方式有很多种,根据传送者和接收者可以分为如下: 父组件向子组件传递 子组件向父组件传

  • 深入理解Android组件间通信机制对面向对象特性的影响详解

    组件的特点对于Android的四大组件Activity, Service, ContentProvider和Service,不能有Setter和Getter,也不能给组件添加接口.原因是组件都是给系统框架调用的,开发者只能实现其规定的回调接口,组件的创建与销毁都是由系统框架控制的,开发者不能强行干预,更没有办法获取组件的对象.比如Activity,Service,BroadcastReceiver,你没有办法去创建一个Activity,Service或BroadcastReceiver,然后像使

  • Vue2.0子同级组件之间数据交互方法

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结构如下 接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样 一.我们先来创建中央事件总线,在src/assets/下创建一个eventB

  • 超详细的vue组件间通信总结

    目录 前言 一.props.$emit单向数据流 二.$parent.$children 三.$attrs.$listeners 四.provide.inject 五.eventBus(事件总线) 六.vuex 七.localstorage 总结 前言 组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attrs.$listeners provide.in

  • Vue常见组件间通信方案及典型应用场景详解

    目录 什么是组件通信 1.父子组件通信场景 2.兄弟组件通信场景 3.根组件和后代组件通信场景 4.插槽通信场景 5 无直接关系的组件通信场景 6 大型项目中的复杂组件通信场景 - Vuex状态管理 7 其他的一些组件通信方案 总结 什么是组件通信 所谓组件通信,就是组件之间的数据交互,也就是把一个组件A里面的数据传递到另一个组件B,并能够让组件B根据这个数据更新界面. 在 Vue中,可用的通信方案有很多,下面给大家描述几个常用的组件通信方案及其典型的应用场景. 1.父子组件通信场景 父子组件通

随机推荐