文章目录
- Vue3之属性传值的四种情况
- 一、引言
- 二、父组件向子组件传值
- 三、子组件向父组件传值
- 四、祖先组件向后代组件传值
- 五、兄弟组件之间传值
Vue3之属性传值的四种情况
一、引言
在vue3中,组件与组件之间是可以传递属性的,包括三种类型:
- 父组件向子组件传值
- 子组件向父组件传值
- 祖先组件向后代组件传值
- 兄弟组件之间传值
本篇文章来分析一下他们分别是如何实现的?
本篇文章均采用vue3+ts格式书写
二、父组件向子组件传值
首先,在父组件中子组件标签上 加上自定义的属性名称以及对应的数据,如下:
<Header class="xm-header" :title="data"></Header>
这里,我们自定义属性名为title,属性值为data,注意data为响应式数据
其次,在子组件中要去通过defineProps()方法接收这个值,
const props = defineProps<{
title: string
}>()
这里使用的是ts写法,父组件传递的值会被封装成一个对象,在<>中写上对象的类型推断,即可取到值。
这里我们可以看一下props的内容
且看源码可以知道,这个返回的对象是一个只读属性,readonly
是Vue3中提供的一个新特性,用于将一个响应式对象变成只读对象。
export declare function defineProps<TypeProps>(): DefineProps<LooseRequired<TypeProps>, BooleanKey<TypeProps>>;
export type DefineProps<T, BKeys extends keyof T> = Readonly<T> & {
readonly [K in BKeys]-?: boolean;
};
它的返回值是Readonly,且这个泛型T是我们传进去的ts类型
{title: string}
一个普通的object对象,而在template中可以使用两种方式获取到title的值
- 直接使用{{props.title}}
- {{title}}
第二种方式我也不知道为什么可以直接使用,希望有大佬在评论区解答一下
存在一种情况,就是父组件没有传值,但是我希望有个默认值,可以使用withDefault()方法
withDefaults(
defineProps<{
title: string
}>(),
{ title: '默认标题' }
)
第一个参数传defineProps()方法,第二个参数传一个对象,这个对象中,还能这样使用:
{title:()=>"默认标题"}
三、子组件向父组件传值
子组件向父组件中传值使用defineEmits()方法,它的作用是在使用emits声明由组件触发的自定义事件时获得完整的类型推导。
const emit = defineEmits<{
//在父组件中自定义的返回事件的名称,name是方法的参数,其对应类型为传递的值的类型
onClick:[name:string]
}>()
注:这里声明的onClick不能使用on-click的形式,会报错
同时还要在子组件中声明一个事件,实现动态传递值,比如说你定义一个按钮,其执行的函数是send函数。
const send = () => {
emit("onClick","gunala")
}
这里可以使用emit方法,注意:这个方法是defineEmits的返回值。
第一个参数是:在父组件中自定义的返回事件的名称;第二个参数是:要传递的数值
最后一步,在父组件中接收返回的自定义函数
<Header class="xm-header" :title="data" @onClick="name"></Header>
这里name是一个函数,需要在父组件中定义声明。
const name = (target:string):void=>{
//这个target就是我们传递的值
console.log(target);
}
四、祖先组件向后代组件传值
如果爷爷组件想向孙子组件传值的话,以前是要先向父亲组件传值,再由父亲组件向儿子组件传值
vue3提供了一种简便的方式:provide()和inject()
前提,在setup阶段调用,即在中使用。
比如,我现在想向子孙组件中传递一个参数,改变子孙组件中的一个div块的背景色
//祖先组件
import { ref, provide } from 'vue'
const color = ref("yellow")
provide("color", color)
在子孙组件中接收参数
//子孙组件
<script setup lang="ts">
import { inject } from 'vue';
//引入ts中的Ref类型的声明
import type { Ref } from 'vue';
const color = inject<Ref<string>>('color')
</script>
其次可以在子孙组件中的style样式中直接获取到color值,使用v-bind
.box {
width: 100px;
height: 100px;
background-color: v-bind(color);
}
五、兄弟组件之间传值
Vue3中推荐使用第三方库 mitt 作为兄弟组件传值的媒介,不再需要找到父组件作为传值的媒介,提高服务性能。
使用方法:
- 安装mitt库
npm run mitt -S
- 在main.ts中注册为全局配置属性
import App from "./App.vue";
//引入mitt
import mitt from "mitt"
const Mitt = mitt();
export const app = createApp(App);
//配置全局属性,属性名:$Bus
app.config.globalProperties.$Bus = Mitt;
这样直接使用,在后面会没有类型推导和提示,可以声明$Bus的类型。
declare module "vue" {
//用于声明全局属性类型
export interface ComponentCustomProperties {
$Bus: typeof Mitt;
}
}
- 在组件中使用
我在这里声明了两个兄弟组件,他们在一个父亲组件中被引用
我在A组件中写了一个按钮,其功能是向B组件传值,
<template>
<div>
<h2>A组件</h2>
<el-button type="primary" @click="send">传值</el-button>
</div>
</template>
<script lang="ts" setup>
//getCurrentInstance方法是获取当前对象的实例,方便从全局配置属性拿值
import { getCurrentInstance } from 'vue';
//getCurrentInstance()中有两个属性:ctx 是普通对象,proxy 是 Proxy 对象
const instance = getCurrentInstance()
const send = () => {
//emit方法是传值,第一个属性是事件名,第二个是值
instance?.proxy?.$Bus.emit('data', 'Hello from A')
}
</script>
<style scoped>
</style>
在B组件监听接收A组件传来的值
<script lang="ts" setup>
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance()
//on()方法是监听函数,监听是否接受到第一个事件名
instance?.proxy?.$Bus.on('data', (data: string) => {
console.log('B组件接收到数据:', data);
})
</script>
这里来看一下结果:
也可以监听所有事件:“*”
<script lang="ts" setup>
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance()
//on()方法是监听函数,监听是否接受到第一个事件名,函数的第一个属性type是监听到的事件名称,data是传递的值
instance?.proxy?.$Bus.on('*', (type:string,data: string) => {
console.log('B组件接收到来自',type,'的数据:', data);
})
</script>
取消对某个事件的监听:
// 需要取消指定事件的监听,需要将回调定义在外部
const Fn = (data: string) => {
console.log('B组件接收到数据:', data);
}
instance?.proxy?.$Bus.on('data',Fn)
instance?.proxy?.$Bus.off('data',Fn)
清除所有事件的监听:
instance?.proxy?.$Bus.all.clear()