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”。

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

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

相关内容

热门资讯

安卓系统计划软件推荐,精选计划... 你有没有发现，手机里的安卓系统越来越智能了？这不，最近我可是挖到了一些超棒的安卓计划软件，它们不仅能...
收钱吧安卓系统插件,便捷支付新... 你有没有发现，现在的生活越来越离不开手机了？手机里装满了各种应用，而今天我要跟你聊聊一个特别实用的工...
鸿蒙系统是否还属于安卓,独立于... 你有没有想过，那个在我们手机上默默无闻的鸿蒙系统，它到底是不是安卓的“亲戚”呢？这个问题，估计不少手...
安卓系统手机用什么钱包,轻松管... 你有没有想过，你的安卓系统手机里装了那么多应用，但最离不开的，可能就是那个小小的钱包了。没错，就是那...
安卓系统能玩部落冲突吗,部落冲... 你有没有想过，安卓系统上的手机，是不是也能玩那款风靡全球的《部落冲突》呢？这款游戏自从推出以来，就吸...
智能机器人安卓系统,引领未来智... 你知道吗？在科技飞速发展的今天，智能机器人已经不再是科幻电影里的专属了。它们正悄悄地走进我们的生活，...
华为win10系统改装安卓系统... 你有没有想过，你的华为笔记本电脑里的Windows 10系统，能不能来个华丽变身，变成安卓系统呢？这...
旧电脑上安什么安卓系统,适配不... 你那台旧电脑是不是已经闲置好久了？别让它默默无闻地躺在角落里，给它来个华丽变身吧！今天，就让我来告诉...
安卓app语言跟随系统,随系统... 你知道吗？在手机世界里，有一个神奇的小功能，它就像你的贴身翻译官，无论你走到哪里，都能帮你轻松应对各...
惠城安卓系统降级在哪,揭秘降级... 你有没有遇到过手机系统升级后，发现新系统让你头疼不已，想回到那个熟悉的安卓系统呢？别急，今天就来告诉...
阿里云系统转安卓,揭秘安卓平台... 你知道吗？最近有个大动作在互联网圈里引起了不小的波澜，那就是阿里云系统竟然要转战安卓阵营了！这可不是...
安卓系统有最美壁纸么,探寻最美... 哦，亲爱的安卓用户，你是否曾在某个午后，百无聊赖地翻看着手机，突然被那一张张壁纸惊艳了眼眸？是的，我...
安卓系统采用Linux操作系统... 你知道吗？安卓系统，这个在我们手机上无处不在的小家伙，它的心脏竟然是Linux操作系统内核！是不是觉...
安卓原生平板通用系统,探索安卓... 你有没有发现，现在市面上平板电脑的品牌和型号真是五花八门，让人挑花了眼？不过，你知道吗？在众多安卓平...
小米1系统是安卓几,搭载安卓几... 你有没有想过，你的小米手机里那个熟悉的系统，其实是基于安卓的哦！没错，就是那个全球最流行的手机操作系...
可以安装安卓系统的相机,智能摄... 你有没有想过，一台相机不仅能拍出美美的照片，还能像智能手机一样，玩转各种应用？没错，现在市面上就有这...
安卓系统gps定位不准,安卓G... 你是不是也遇到过这种情况？手机里的安卓系统GPS定位总是不准，让人头疼不已。有时候，你明明就在家附近...
电信机顶盒装安卓系统,开启智能... 你有没有想过，家里的电信机顶盒其实也可以装上安卓系统呢？听起来是不是有点不可思议？别急，让我带你一步...
安卓系统可以做苹果桌面,打造个... 你知道吗？现在科技的发展真是让人眼花缭乱，竟然有人想出了安卓系统可以做苹果桌面的神奇想法！是不是觉得...
安卓系统自带的网页,功能与特色... 你有没有发现，每次打开安卓手机，那熟悉的系统界面里总有一个默默无闻的小家伙——安卓系统自带的网页浏览...