Vue3之属性传值的四种情况

文章目录

  • 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的值

  1. 直接使用{{props.title}}
  2. {{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 作为兄弟组件传值的媒介,不再需要找到父组件作为传值的媒介,提高服务性能。

使用方法:

  1. 安装mitt库
npm run mitt -S
  1. 在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;
    }
}
  1. 在组件中使用

我在这里声明了两个兄弟组件,他们在一个父亲组件中被引用

在这里插入图片描述

我在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()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/414521.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java Stream流指南:优雅处理集合数据

文章目录 一、为什么要使用stream流呢&#xff1f;二、如何获取Stream流&#xff1f;三、Stream流的中间方法四、Stream流的终结方法总结 一、为什么要使用stream流呢&#xff1f; 想必我们在日常编程中&#xff0c;会经常进行数据的处理&#xff0c;我们先来看看没有stram流时…

从零开始学习Netty - 学习笔记 -Netty入门-ChannelFuture

5.2.2.Channel Channel 的基本概念 在 Netty 中&#xff0c;Channel 是表示网络传输的开放连接的抽象。它提供了对不同种类网络传输的统一视图&#xff0c;比如 TCP 和 UDP。 Channel 的生命周期 Channel 的生命周期包括创建、激活、连接、读取、写入和关闭等阶段。Netty 中…

CGI程序与ShellShock漏洞

CGI是什么&#xff1f; CGI&#xff08;通用网关接口&#xff0c;Common Gateway Interface&#xff09;程序是一种用于在Web服务器上执行动态内容的技术。与服务器上普通的后端代码相比&#xff0c;CGI程序有几个区别&#xff1a; 执行环境&#xff1a; CGI程序在服务器上作为…

js中Symbol的理解与应用

文章目录 一、Symbol特性1.1 不支持语法new Symbol()1.2 唯一性1.3 不与其他值隐式转换1.4 不可枚举1.5 类型为symbol 二、Symbol常见方法2.1 Symbol.toStringTag2.2 Symbol.iterator2.3 Symbol.for() 三、Symbol应用 在JavaScript中&#xff0c;Symbol 是一种基本数据类型&…

el-table 多选表格存在分页,编辑再次操作勾选会丢失原来选中的数据

el-table表格多选时&#xff0c;只需要添加type"selection"&#xff0c; row-key及selection-change&#xff0c;如果存在分页时需要加上reserve-selection&#xff0c;这里就不写具体的实现方法了&#xff0c;可以查看我之前的文章&#xff0c;这篇文章主要说一下存…

智能指针(C++)

目录 一、智能指针是什么 二、为什么需要智能指针 三、智能指针的使用和原理 3.1、RALL 3.2 智能指针的原理 3.3、智能指针的分类 3.3.1、auto_ptr 3.3.2、unique_ptr 3.3.3、shared_ptr 3.2.4、weak_ptr 一、智能指针是什么 在c中&#xff0c;动态内存的管理式通过一…

VPX基于全国产飞腾FT-2000+/64核+复旦微FPGA的计算刀片

6U VPX计算板 产品简介 产品特点 飞腾计算平台&#xff0c;国产化率100% VPX-MPU6902是一款基于飞腾FT-2000/64核的计算刀片&#xff0c;主频2.2GHz&#xff0c;负责业务数据流的管控和调度。搭配自带独立显示芯片的飞腾X100芯片&#xff0c;可用于于各类终端及服务器类应用场…

Spring与SpringBoot入门

Spring入门 要使用Spring最起码需要引入两个依赖: <!-- Spring Core&#xff08;核心&#xff09; --><dependency><groupId>org.springframework</groupId><artifactId>spring-core</artifactId><version>5.3.20</version>…

小白水平理解面试经典题目LeetCode 655. Print Binary Tree【Tree】

655 打印二叉树 一、小白翻译 给定二叉树的 root &#xff0c;构造一个 0 索引的 m x n 字符串矩阵 res 来表示树的格式化布局。格式化布局矩阵应使用以下规则构建&#xff1a; 树的高度为 height &#xff0c;行数 m 应等于 height 1 。 列数 n 应等于​​xheight1​​ - …

爆火的1分钟声音克隆GPT-SoVITS项目 linux系统 ubuntu22.04安装2天踩坑教程

原项目地址&#xff1a;https://github.com/RVC-Boss/GPT-SoVITS 1分钟素材&#xff0c;最后出来的效果确实不错。 1. cuda环境安装 cuda环境准备 根据项目要求在cuda11.8和12.3都测试了通过。我这里是用cuda11.8 cuda11.8安装教程&#xff1a; ubuntu 22.04 cuda多版本和…

【软件测试】--功能测试4-html介绍

1.1 前端三大核心 html:超文本标记语言&#xff0c;由一套标记标签组成 标签&#xff1a; 单标签&#xff1a;<标签名 /> 双标签:<标签名></标签名> 属性&#xff1a;描述某一特征 示例:<a 属性名"属性值"> 1.2 html骨架标签 <!DOC…

蓝桥杯第十四届电子类单片机组决赛程序设计

目录 前言 单片机资源数据包_2023&#xff08;点击下载&#xff09; 一、第十四届比赛题目 1.比赛题目 2.题目解读 1&#xff09;任务要求 2&#xff09;注意事项 二、显示功能实现 1.关于高位为0时数码管熄灭功能的实现 2.关于显示小数位的处理 3.关于“校准值”的…

某查查首页瀑布流headers加密

目标网站&#xff1a; 某查查 对目标网站分析发现 红框内的参数和值都是加密的&#xff0c;是根据算法算出来的&#xff0c;故进行逆向分析。 由于没有固定参数名&#xff0c;只能通过搜索headers&#xff0c;在搜索的位置上打上断点&#xff0c;重新请求。 断点在此处断住&a…

【计算机】本科考研还是就业?

其实现在很多计算机专业的学生考研&#xff0c;也是无奈的选择 技术发展日新月异&#xff0c;而在本科阶段&#xff0c;大家学着落后的技术&#xff0c;出来找工作自然会碰壁。而且现在用人单位的门槛越来越高&#xff0c;学历默认研究生起步&#xff0c;面试一般都是三轮起步…

循序渐进丨MogDB / openGauss 如何实现自增主键

概述 自增主键是我们在设计数据库表结构时经常使用的主键生成策略&#xff0c;主键的生成可以完全依赖数据库&#xff0c;无需人为干预&#xff0c;在新增数据的时候&#xff0c;我们只需要将主键的值设置为default&#xff0c;数据库就会为我们自动生成一个主键值。 MySQL 主键…

基于沁恒微 ch643q 多通道采集 adc 驱动层实现

一、代码 #include "main.h"/********************************************************************** fn ADC_Function_Init** brief Initializes ADC collection.** return none*/ void ADC_Function_Init(void) {ADC_InitTypeDef ADC_InitStructure …

【Go 快速入门】协程 | 通道 | select 多路复用 | sync 包

文章目录 前言协程goroutine 调度使用 goroutine 通道无缓冲通道有缓冲通道单向通道 select 多路复用syncsync.WaitGroupsync.Mutexsync.RWMutexsync.Oncesync.Map 项目代码地址&#xff1a;05-GoroutineChannelSync 前言 Go 1.22 版本于不久前推出&#xff0c;更新的新特性可…

LoRa技术在智能气象监测中的应用与解决方案分享

LoRa技术在智能气象监测领域的应用具有广泛的前景&#xff0c;通过LoRa技术可以实现对气象数据的远程采集、传输和监测&#xff0c;为气象行业提供更加智能化和高效的解决方案。以下将探讨LoRa技术在智能气象监测中的应用与解决方案分享。 首先&#xff0c;LoRa技术可以用于连…

python|闲谈2048小游戏和数组的旋转及翻转和转置

目录 2048 生成数组 n阶方阵 方阵旋转 顺时针旋转 逆时针旋转 mxn矩阵 矩阵旋转 测试代码 测试结果 翻转和转置 2048 《2048》是一款比较流行​的数字游戏​&#xff0c;最早于2014年3月20日发行。原版2048由Gabriele Cirulli首先在GitHub上发布&#xff0c;后被移…

【C语言】数据存储篇,内存中的数据存储----C语言整型,浮点数的数据在内存中的存储以及大小端字节序【图文详解】

欢迎来CILMY23的博客喔&#xff0c;本篇为​【C语言】数据存储篇&#xff0c;内存中的数据存储----C语言整型&#xff0c;浮点数的数据在内存中的存储以及大小端字节序【图文详解】&#xff0c;感谢观看&#xff0c;支持的可以给个一键三连&#xff0c;点赞关注收藏。 前言 C语…