VUE3+TS(父子兄弟组件通信)

Posted Johnson_9

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE3+TS(父子兄弟组件通信)相关的知识,希望对你有一定的参考价值。

目录

父传子值、方法(子调用父值、方法)

子传父值(父调用子值)

父读子(子传父)(父调用子值、方法)

兄弟(任意组件)通信

引入Mitt来完成任意组件通信


父传子值、方法(子调用父值、方法)

1、统一规范写法,通过在子组件标签上绑定属性和值,来传递到子组件,子组件再通过defineProps来接收,先给其定义类型再用withDefaults是为了在不传递的时候给其一个默认值

//父组件直接在标签发送
<Children :aaa="aaa" :data="data"></Children>
------------------------------------------------
//子组件两种接收方式
//方式一:子组件定义类型再接收
//?表示可传可不传
type Props =  aaa?: String; data?: number[] ;
//通过defineProps接受,给一个默认值    
const a = withDefaults(defineProps<Props>(), 
  aaa: '张三',
  data: [1, 2],
);
//调用
const changehandle = () => 
  console.log(a.aaa);
  console.log(a.data[0]);
;
//方式二:子组件混合定义接收
import  PropType  from 'vue';
const prop = defineProps(
    aaa: 
        type: Object as PropType<Student>,
        default: () =>  
    ,
    //定义接收父组件方法
    bbb: 
        type: Function,
        default: () =>  
    ,
)
//调用
prop.aaa;
prop.bbb();

2、利用vue自带的provide传递、inject接受,用法很简单,需要响应式只需要用ref包起来

// 父组件,引入provide,然后定义一个属性和值
import provide from 'vue'
provide('flag',xxx)

// 子组件,先引入inject,再获取
import inject from 'vue'
let data = inject('flag')

子传父值(父调用子值)

先用defineEmits定义一个emit,里面存放即将被调用的自定义事件名,然后将其写进一个方法里,再通过父组件来定义这个事件,触发事件即可获取绑定的属性值

//子组件定义一个点击事件
<el-button type="success" @click="changehandle">子组件按钮</el-button>
//定义一个自定义事件
const emit = defineEmits(['clickToFather']);
//通过事件传过去
const changehandle = () => 
  emit('clickToFather', msg);
;

//父组件使用自定义事件名
<Children @clickToFather="getList"></Children>
//调用获取
const getList = (msg: string) => 
  console.log(msg);
;

父读子(子传父)(父调用子值、方法)

简单来说就是父组件获取到子组件的实例,用实例来调用子组件的方法,但是和vue2不同的是,子组件需要将方法暴露出去,父组件才能通过实例获取到,这样就确保了足够的安全性

//子组件将值暴露出去
defineExpose(
  msg,
);

//父组件获得子组件的实例
<Children ref="menus"/>
//定义
const menus = ref(null);
//调用
const changehandle = () => 
  console.log(menus.value.msg);
;

兄弟(任意组件)通信

1、兄弟组件通信:可以先把值传给父组件,再通过父组件传给另一个子组件,就做到了兄弟组件的传参,但是问题就是及其麻烦,所以引出第二种方式

2、通过消息的发布订阅来实现,定义一个bus(可实现任意组件通信

      先在父组件所在目录下定义一个Bus.ts文件

// 先定义一个类型,emit作为发布(传递),on作为订阅(接收)
// name是事件名称,callback是一个回调函数
type BusClass = 
    emit:(name:string) => void
    on:(name:string, callback:Function) => void

// 定义多种参数类型
type PramsKey = string | number | symbol
// 定义一个调用中心,可以接收多个参数
type List = 
   [key:PramsKey]: Array<Function>

class Bus implements BusClass 
    list: List
    constructor ()
        // 初始化list
        this.list =    
    
    // 发布事件,...args解构多个参数
    emit (name:string,...args:Array<any>)
        // 获取到list里的数据
        let evnentName:Array<Function> = this.list[name]
        evnentName.forEach(fn =>
            fn.apply(this, args)
        )
    
    // 接收事件
    on (name:string, callback:Function)
        // 如果是第一次注册,则为空;如果被多次注册,则采用之前注册的名字
        let fn:Array<Function> = this.list[name] || []
        fn.push(callback)
        this.list[name] = fn
    

// 导出bus
export default new Bus()

现在来使用刚刚定义的bus,将A组件的值传递给B组件

A组件

<button @click="emitB">派发一个事件</button>

// 引入bus
import Bus from '../Bus'
// 定义一个属性值
let flag = '我来自A组件'
const emitB = () =>
    // 通过Bus发布出去一个'on-click'事件,并携带flag 参数
    Bus.emit('on-click',flag)

B组件

// 引入bus
import Bus from '../Bus'
// 接收事件
Bus.on('on-click',(flag: string) =>
    console.log('接收的值为',flag)
)

这样就完成了一个兄弟组件的传参

该方法不仅方便,且可以实现任意组件通信,极其方便实用!

该方法不仅方便,且可以实现任意组件通信,极其方便实用!

引入Mitt来完成任意组件通信

当然了,上面只是我们自己手写的Bus,其实这个库别人早已写好了,我们可以直接引入

首先安装依赖:

#安装命令
npm install mitt -S

全局使用

在main.ts文件中引入并开启使用

// 引入
import mitt from 'mitt'
//定义
const Mit = mitt()
//全局声明
declare module 'vue' 
    export interface ComponentCustomProperties
        $Bus: typeof Mit
    

//使用
app.config.globalProperties.$Bus = Miit()

引入完成,使用方式和手写的基本一致,只不过名字不同

A组件

<button @click="emit">派发一个事件</button>

//引入
import getCurentInstance from 'vue'
//初始化
const instance = getCurentInstance()
//使用(发送事件)
const emit = () =>
    // emit(自定义事件名,参数,....)
    instance?.proxy?.$Bus.emit('on-click',xxx)

B组件

// 引入bus
import getCurentInstance from 'vue'
// 初始化
const instance = getCurentInstance()
// 接收事件
instance?.proxy?.$Bus.on('on-click',(xxx: string) =>
    console.log('接收的值为',xxx)
)

如果此时A组件发送了多个事件,B组件可以用*接收,写法如下

// yyy,xxx为两个事件的参数
instance?.proxy?.$Bus.on('*',(yyy,xxx) =>
    console.log('接收的值为',yyy,xxx)
)

有发送事件,自然还有取消事件

// 这里先把Bus提取出来
const Bus = (xxx) =>
    console.log('接收的值为',xxx)

// 这里依旧写on,接收事件
instance?.proxy?.$Bus.on('on-click',Bus)

// 这里还可以调用取消指定事件
// off(取消指定的mitt事件,取消的函数)
instance?.proxy?.$Bus.off('on-click',Bus)

// 还可以取消全部事件
instance?.proxy?.$Bus.all.clear()

该方法不仅方便,且可以实现任意组件通信,极其方便实用!

该方法不仅方便,且可以实现任意组件通信,极其方便实用!

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

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

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

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

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

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

TS 语法使用:

非 TS 语法使用:

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

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

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

使用方式1:分离模式

使用方式2:组合模式

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

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

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

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

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

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

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

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

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

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

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

以上是关于VUE3+TS(父子兄弟组件通信)的主要内容,如果未能解决你的问题,请参考以下文章

vue3父子通信

vue3组件间通信

Vue3父子组件间传参通信

Flutter学习组件通信(父子兄弟)

vue组件之间的通信, 父子组件通信,兄弟组件通信

五vue3.0之组件通信详解(definePropsdefineEmitsdefineExpose)