Vue3-实现父子组件通信

news2024/11/6 15:34:26

Vue3-实现父子组件通信

  • 父组件向子组件传值
    • defineProps()
    • 代码示例
  • 子组件给父组件传值
    • defineEmits()
    • 示例代码
  • 结语

😀大家好!我是向阳🌞,一个想成为优秀全栈开发工程师的有志青年!
📔今天来讨论前端中Vue3父子组件之间的通信。

父组件向子组件传值

defineProps()

在vue3中,我们使用内置函数 defineProps() 接收父组件穿过来的值。

在父组件中调用子组件,并且向子组件中传值,在子组件中使用defineProps接收父组件穿过来的值。

defineProps接收父亲传过来的值有两种写法。

  • 第一种
defineProps({
  name: String
})

当然我们也可以对接收的值赋默认值

defineProps({
  name: {
    type: String,
    default: '默认值'
  }
})

如果父组件那边没有传值过来,页面就会显示我们设置的默认值,如图所示。

在这里插入图片描述

  • 第二种
defineProps<{
  name: string
}>()

同样我们也可以对接收的值赋默认值,但是第二种写法我们要使用另一个内置方法 withDefaults() 进行赋值,第一个参数为 difineProps(),第二个参数来设置默认值

withDefaults(
    defineProps<
        { name: string }
    >(),
    {name: '默认值'}
)

效果也是一样的。

在这里插入图片描述

代码示例

父组件 Parent.vue

<template>
  <div class="parent">
    我是父组件 Parent
  </div>
  <hr>
  <Son :name="parentName" />
</template>

<script setup lang='ts'>
import Son from "./Son.vue";
import {ref} from "vue";

const parentName = ref('我是父组件')
</script>

<style scoped>
.parent {
  color: red;
}
</style>

子组件 Son.vue

<template>
  <div class="son">
    我是子组件 Son
    <br>
    这是我接收到父组件的属性:{{ name }}
  </div>
</template>

<script setup lang='ts'>
defineProps({
  name: String
})
</script>

<style scoped>
.son {
  color: blue;
}
</style>

效果图:

在这里插入图片描述

子组件给父组件传值

子组件给父组件传值使用的是自定义事件 defineEmits()

子组件使用 defineEmit() 方法给父组件传自定义事件。父组件通过接收子组件的自定义事件来处理接收的值。

defineEmits()

使用 defineEmits() 接收一个数组,数组里面是自定义的事件,返回的参数来像父组件传值。

const $emit = defineEmits(['getSex'])

我们可以定义一个按钮,来处理 defineEmits() 返回的参数,例如下面的代码。

const send = () => {
  $emit('getSex', '男')
}

父组件那边定义自定义事件来进行接收,名称要与 defineEmits() 中的相同。

<Son @getSex="receiveSonSex"/>

示例代码

父组件 Parent.vue

<template>
  <div class="parent">
    我是父组件 Parent
  </div>
  <hr>
  <Son @getSex="receiveSonSex"/>
</template>

<script setup lang='ts'>
import Son from "./Son.vue";

const receiveSonSex = (sex: string) => {
  console.log('我是父组件,我收到了子组件的性别:' + sex)
}

</script>

<style scoped>
.parent {
  color: red;
}
</style>

子组件 Son.vue

<template>
  <div class="son">
    我是子组件 Son
    <br>
    <button @click="send">我给父组件传值</button>
  </div>
</template>

<script setup lang='ts'>
const $emit = defineEmits(['getSex'])

const send = () => {
  $emit('getSex', '男')
}

</script>

<style scoped>
.son {
  color: blue;
}
</style>

点击按钮,效果图如下:

在这里插入图片描述

结语

上面就是父子组件通信的全部介绍啦,下篇文章会向大家介绍兄弟组件之间的通信,以及使用pinia进行全局通信。希望大家可以给博主一个关注,后续会有更多优质文章的更新!

请添加图片描述

——👦[作者]:向阳256
——⏳[更新]:2024.11.3
——🥰本人技术有限,如果有不对指正需要更改或者有更好的方法,欢迎到评论区留言。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Imperva 数据库与安全解决方案

Imperva是网络安全解决方案的专业提供商&#xff0c;能够在云端和本地对业务关键数据和应用程序提供保护。公司成立于 2002 年&#xff0c;拥有稳定的发展和成功历史并于 2014 年实现产值1.64亿美元&#xff0c;公司的3700多位客户及300个合作伙伴分布于全球各地的90多个国家。…

【TabBar嵌套Navigation案例-常见问题按钮-WebView-加载本地html文件 Objective-C语言】

一、接下来,我们来说,webView如何加载本地的html文件 1.把这里的http://www.baidu.com/ 如何替换成本地的html文件,实际上,我们只需要把URL替换一下就可以了, 然后呢,先给大家看一眼素材,在我们的help.json里边,比如说,第一个按钮, 如何领奖,这块儿有一个叫做htm…

搜维尔科技:【煤矿虚拟仿真】煤矿企业、高校、科研单位-多语言支持、数字孪生、交互式学习体验

品牌&#xff1a;SouVR 发票&#xff1a;支持专票、普票 单位&#xff1a;套 版本号&#xff1a;1.0 包装清单&#xff1a;软件1套 软件形式&#xff1a;U盘、光盘 运行环境&#xff1a;windows 应用对象&#xff1a;煤矿企业、高校、科研单位 系统配置&#xff1a;…

【CSS】标准怪异盒模型

概念 CSS 盒模型本质上是一个盒子&#xff0c;盒子包裹着HTML 元素&#xff0c;盒子由四个属性组成&#xff0c;从内到外分别是&#xff1a;content 内容、padding 内填充、border 边框、外边距 margin 盒模型的分类 W3C 盒子模型(标准盒模型) IE 盒子模型(怪异盒模型) 两种…

国标GB28181视频平台EasyCVR私有化视频平台工地防盗视频监控系统方案

一、方案背景 在当代建筑施工领域&#xff0c;安全监管和防盗监控是保障工程顺利进行和资产安全的关键措施。随着科技进步&#xff0c;传统的监控系统已不足以应对现代工地的安全挑战。因此&#xff0c;基于国标GB28181视频平台EasyCVR的工地防盗视频监控系统应运而生&#xf…

动态规划 —— dp 问题-打家劫舍II

1.打家劫舍II 题目链接&#xff1a; 213. 打家劫舍 II - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/house-robber-ii/ 2. 题目解析 通过分类讨论&#xff0c;将环形问题转换为两个线性的“打家劫舍|” 当偷第一个位置的时候&#xff0c;rob1在&#…

配置elk插件安全访问elk前台页面

编辑els配置文件vim elasticsearch.yml,添加以下配置文件 用elk用户&#xff0c;启动els服务 关闭防火墙&#xff0c;查看els启动是否成功&#xff0c;通过是否启动java进程来判断 或者通过查看是否启动9200和9300端口来判断是否启动 交互模式启动密码配置文件interactive表示交…

通过mybatis和mybatis plus 实现用户注册功能和基础的增删改查

1,切分application的环境并引入依赖 通过将application.yml进行切分&#xff0c;切分成三个不同的环境&#xff0c;生产环境和开发环境&#xff0c;我们可以在不同情况下所需要的不同环境上进行相关的配置 我们对代码进行一次切分 application.yml spring:application:name…

TypeError: Cannot read properties of undefined (reading ‘__asyncLoader‘)

项目场景&#xff1a; vue3element-plus 项目场景&#xff1a;vue3element-plustsvite的技术栈开发的后台&#xff0c;一个后台列表页面&#xff0c;使用了ElTable组件 问题描述 页面提示报一个好像是异步的问题 runtime-core.esm-bundler.js:2261 Uncaught (in promise) Ty…

大模型学习笔记------CLIP模型解读与思考

大模型学习笔记------CLIP模型解读与思考 1、为什么提出CLIP模型2、CLIP模型详解3、CLIP模型的重要意义 上文已经讲到&#xff0c;我认为多模态的大模型是最有前途的大模型&#xff0c;首先学习的就是CLIP这个模型。 CLIP&#xff08;Contrastive Language-Image Pretraining&…

【大数据学习 | kafka】kafka的ack和一致性

1. ack级别 上文中我们提到过kafka是存在确认应答机制的&#xff0c;也就是数据在发送到kafka的时候&#xff0c;kafka会回复一个确认信息&#xff0c;这个确认信息是存在等级的。 ack0 这个等级是最低的&#xff0c;这个级别中数据sender线程复制完毕数据默认kafka已经接收到…

完美解决mysql -u root -p ‘mysql‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件

如果你已经安装了mysql8.0&#xff0c;但是还出现是下面的问题&#xff0c;解决方法是从根目录打开或者配置环境变量。 遇到的错误主要是与命令行环境和 MySQL 命令无法识别有关。这里我会逐步分析问题&#xff0c;并给出可能的解决方法。 问题描述和分析&#xff1a; ‘my…

UE5 材质篇 1 如何偏移顶点

顶点偏移 start content里的plane长这样 我们进行一点顶点偏移就能长这样 XY加起来乘个缩放系数扔给sin结果乘个缩放系数即可

求助帖【如何学习核磁共振的原理】

最近提前进组了 我完全不懂磁共振的相关知识 想问问各位大佬有没有推荐的学习路线 或者是学习资料、论坛都可以的&#xff08;我做的方向是磁共振成像技术&#xff09; 老师给了一本书&#xff0c;但是有点看不懂&#xff0c;全英文的 叫Principles Of Magnetic Resonance …

vite+vue项目创建流程;npm error enoent Could not read package.json异常报错问题

前提概要&#xff1a;默认下载好node vue vite等等东西啊 新建文件夹&#xff0c;放项目管理员身份运行命令行&#xff0c;先转到所在大盘&#xff0c;然后再cd到具体的新建文件夹&#xff0c;执行npm init vitelatest命令。 管理员身份运行vscode&#xff0c;打开刚才新建的v…

[mysql]修改表和课后练习

目录 DDL数据定义语言 添加一个字段 添加一个字段到最后一个 添加到表中的第一个一个字段 选择其中一个位置: 修改一个字段:数据类型,长度,默认值(略) 重命名一个字段 删除一个字段 重命名表 删除表 清空表 DCL中事务相关内容 DCL中COMMIT和ROLLBACK的讲解 对比TR…

秒杀系统的设计与压测

环境准备 数据库 完成demo至少需要两个数据表&#xff0c;一个customer表示秒杀的用户&#xff0c;一个sec_product表示被秒杀的商品。 create database sec_kill;use sec_kill; create table customer(id int primary key auto_increment not null,name varchar(20),phone …

SpringBoot健身房管理系统:用户体验至上

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…

一:时序数据库-Influx应用

目录 0、版本号 1、登录页面 2、账号基本信息 3、数据库案例 4、可视化 5、java案例 0、版本号 InfluxDB v2.4.0 1、登录页面 http://127.0.0.1:8086/signin 账号&#xff1a;自己账号 密码&#xff1a;自己密码 2、账号基本信息 查看用户id和组织id&#xff01;&…

SpringBoot day 1105

ok了家人们&#xff0c;今天继续学习spring boot&#xff0c;let‘s go 六.SpringBoot实现SSM整合 6.1 创建工程&#xff0c;导入静态资源 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</…