vue3 setup语法糖父子组件传值，让女友看得明明白白
创始人
2024-05-10 00:06:32
0次

前言

最近在想做个cloud项目,gitee上找了个模板项目，前端使用到vue3 + typeScript，最近使用到vue3 的父子组件之间的传值，顺便学习一下，在此总结一下，若有不足之处，望大佬们可以指出。
vue3官网：https://cn.vuejs.org/

一、父向子组件传值

父组件传递参数

子组件接收参数

defineEmits： defineEmits() 宏仅限于 setup 语法糖 使用，用来声明组件要触发的事件。

父组件小优化

官方文档：https://cn.vuejs.org/guide/components/props.html#prop-passing-details

这实际上等价于：

实现效果

在这里插入图片描述
在这里插入图片描述

二、子向父组件传值

子组件传递参数

父组件接收参数

实现效果

在这里插入图片描述
在这里插入图片描述

三、 defineExpose 方式（常用）

概述： 这是我在 clone 项目模板中看到的使用方式，也属于最常用的方式。

父向组件传值

子组件接收值

实现效果

在这里插入图片描述
父组件输入 lanys
在这里插入图片描述
点击完成
在这里插入图片描述

这么设计的好处是什么？

从项目中能看出新增和更新功能可以做到通用，节省开发时间及成本。项目中是这么设计的，
在子组件 init(初始化中)

const init = (id?: number) => {// id 存在则为修改if (id) {getUser(id)}// 获取下面的列表数据 可以忽略getOrgList()// 忽略getPostList()// 忽略getRoleList()
}
// 暴露组件
defineExpose({init
})

新增模块(不需要传id)

在这里插入图片描述

更新模块(传id)

在这里插入图片描述

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：深挖你拥有的东西的背后的价值到底是什么，价值转换模型分析。

下一篇：通过软考高项的朋友看过来~“专家库”等你申报

相关内容

热门资讯

非安卓10系统手机,探索非安卓... 你有没有想过，为什么有些人会选择非安卓10系统的手机呢？是不是觉得这有点奇怪？别急，今天就来带你一探...
手机图标制作安卓系统,手机图标... 你有没有想过，那些在手机屏幕上跳动的图标，其实都是精心设计出来的艺术品呢？没错，今天就要带你一探究竟...
安卓系统和鸿蒙系统谁大,谁才是... 你有没有想过，手机里的操作系统就像是一场无声的较量？今天，咱们就来聊聊这个话题：安卓系统和鸿蒙系统，...
bj40安卓系统,功能解析与使... 你有没有发现，最近你的BJ40越野车变得聪明多了？没错，它升级了安卓系统，简直就像给它装上了个智能大...
安卓系统硬件核心板,揭秘智能设... 你有没有想过，手机里的安卓系统其实就像是一个庞大的城市，而硬件核心板就是这座城市的核心区域？今天，就...
王者荣耀安卓系统转区ios系统... 你有没有想过，把你的王者荣耀账号从安卓系统转到iOS系统呢？这可不是一件小事，里面可是有大学问的哦！...
安卓系统的音游,节奏与音乐的完... 你有没有发现，手机里的游戏越来越好玩了？尤其是那些音游，简直让人停不下来！今天，就让我带你深入了解一...
安卓系统取消下方按键,探索全新... 你知道吗？最近安卓系统来了一次大变动，那就是取消了下方按键！这可真是让人眼前一亮，让我们一起来看看这...
安卓系统显示原理设置,从像素到... 你有没有发现，你的安卓手机屏幕上那些花花绿绿的图标和文字，其实背后有着一套神奇而又复杂的显示原理呢？...
平板安卓4.0系统下载,平板下... 你有没有想过，拥有一台运行着最新安卓4.0系统的平板电脑，那感觉简直就像拥有了未来的钥匙？想象流畅的...
安卓原生12系统下载,原生系统... 你有没有听说？安卓原生12系统终于来了！这款全新的操作系统，不仅带来了全新的视觉体验，还有一堆实用的...
安卓怎么下泼辣系统,安卓设备轻... 你有没有想过给你的安卓手机来个“大变身”？想象你的手机瞬间变成了一个泼辣的“女侠”，不仅个性十足，而...
安卓版小米系统下载,畅享智能生... 你有没有发现，最近手机圈里又掀起了一股热潮？没错，就是安卓版小米系统的下载。这款系统自从推出以来，就...
提取安卓系统自带软件,探索安卓... 你有没有想过，你的安卓手机里那些看似不起眼的自带软件，其实都是隐藏的宝藏呢？今天，就让我带你一探究竟...
安卓系统投屏到鸿蒙系统,鸿蒙系... 亲爱的读者们，你是否有过这样的体验：手里拿着安卓手机，却想在大屏幕的鸿蒙系统设备上展示内容？别急，今...
sony 电视安卓8.0系统,... 亲爱的读者们，你是否也和我一样，对科技产品有着浓厚的兴趣呢？今天，我要和你聊聊一个让我眼前一亮的话题...
安卓 替换系统下载,探索安卓系... 你有没有想过，你的安卓手机其实可以换换口味呢？没错，就是那个一直默默陪伴你的系统，今天就来带你一起探...
安卓系统证书信任,安卓系统证书... 你有没有遇到过这种情况？手机里突然弹出一个提示，告诉你某个应用需要获取系统证书信任，然后你一脸懵逼，...
安卓系统应用数据目录,揭秘系统... 你有没有想过，你的安卓手机里那些应用，它们的数据都藏在哪个角落呢？今天，就让我带你一探究竟，揭开安卓...
kindle 安卓 系统 刷机... 亲爱的读者们，你是不是也和我一样，对电子阅读设备情有独钟？尤其是那款小巧便携的Kindle，简直是阅...