Vue3 子组件像父组件传递数据 自定义事件 defineEmits

news2024/11/24 11:31:35

介绍

很多情况下子组件都需要像父组件去传递一些数据,Vue3和Vue2传递值的写法不太一样。

例子

很常见的一个案例,弹出一个商品对话框,用户选择商品后把商品信息返回给父组件,使用自定义事件去做。
在这里插入图片描述

子组件

选择商品对话框

<template>
  <a-modal :open="open"
           title="选择商品"
           @cancel="close"
          :footer="false">
    <p>{{goods.name}}</p>
    <p>{{goods.pie}}</p>
    <p>{{goods.number}}</p>
    <a-button type="primary" @click="retGoods">选择商品</a-button>
  </a-modal>
</template>
<script setup>
import {reactive, ref ,defineEmits,defineProps } from "vue";

defineProps({
  open: {
    type: Boolean,
  },
})


const goods=reactive(({
  name:'鱼子酱',
  pie:9.9,
  number:100
}))

const emit=defineEmits(["select"])
//关键代码 select为触发父组件的事件

function retGoods(){
//goods为商品信息传递给父组件
  emit("select",goods)
}
</script>

在这里插入图片描述点击选择商品后将商品信息返回给父组件

父组件

点击选择商品后会触发@select事件

  <SelectDialog v-model:open="open" @select="selectGoods"></SelectDialog>

function  selectGoods(item) {
  console.log(item)
}

成功拿到数据
在这里插入图片描述

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

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

相关文章

Mamori.xyz:基于机器学习的区块链价值提取系统

Mamori.xyz 是一个基于机器学习的自动化区块链价值提取系统&#xff0c;其开创一种通用路径查找器&#xff0c;该工具可用于检测和防御潜在的未知安全风险&#xff0c;Mamori.xyz 也将其称为“未知的未知”&#xff0c;即智能合约中的零日漏洞和新出现的与区块链相关的软件问题…

学习Python的IDE功能--(一)入门导览

项目视图是主要工具窗口之一。它包含项目目录、SDK 特定的外部库和临时文件。点击带条纹的按钮可以预览演示项目。您也可以按Alt1打开。点击以打开项目视图&#xff0c;展开项目目录以查看项目文件。双击以打开welcome.py。 切换到"学习"工具窗口继续学习本课次。…

vue3表格使用拖拽排序

拖拽排序 实现效果实现步骤拖拽排序功能的完整代码 实现效果 实现步骤 先安装sortable.js库使用的vue文件中引入 import Sortablejs from ‘sortablejs’在进入页面后创建sortable实例在提交后端时可获取到排序后的最新table列表数据 sortable.js文档 拖拽排序功能的完整代码 …

微服务实战系列之玩转Docker(二)

前言 上一篇&#xff0c;博主对Docker的背景、理念和实现路径进行了简单的阐述。作为云原生技术的核心之一&#xff0c;轻量级的容器Docker&#xff0c;受到业界追捧。因为它抛弃了笨重的OS&#xff0c;也不带Data&#xff0c;可以说&#xff0c;能够留下来的都是打仗的“精锐…

【瑞吉外卖 | day07】移动端菜品展示、购物车、下单

文章目录 瑞吉外卖 — day71. 导入用户地址簿相关功能代码1.1 需求分析1.2 数据模型1.3 代码开发 2. 菜品展示2.1 需求分析2.2 代码开发 3. 购物车3.1 需求分析3.2 数据模型3.3 代码开发 4. 下单4.1 需求分析4.2 数据模型4.3 代码开发 瑞吉外卖 — day7 移动端相关业务功能 —…

《绝区零》是一款什么类型的游戏,Mac电脑怎么玩《绝区零》苹果电脑玩游戏怎么样

米哈游的《绝区零》最近在网上爆火呀&#xff0c;不过很多人都想知道mac电脑能不能玩《绝区零》&#xff0c;今天麦麦就给大家介绍一下《绝区零》是一款什么样的游戏&#xff0c;Mac电脑怎么玩《绝区零》。 一、《绝区零》是一款什么样的游戏 《绝区零》是由上海米哈游自主研发…

求立方体面积体积以及判断(c++)

代码&#xff1a; #include<iostream> using namespace std;class Cube { public:void setL(int l){m_L l;}int getL(){return m_L;}void setW(int w){m_W w;}int getW(){return m_W;}void setH(int h){m_H h;}int getH(){return m_H;}int calculateS(){return 2 * (…

使用jenkins进行自动化部署

记录一下查看的文档和遇到的坑 什么是jenkins Jenkins是一个开源的持续集成&#xff08;CI&#xff09;和持续交付&#xff08;CD&#xff09;工具&#xff0c;主要用于自动化软件开发的各个阶段&#xff0c;包括构建、测试、部署等。 Jenkins基于Java开发&#xff0c;支持与…

【数据集处理工具】将COCO格式数据集的val.json与tett.json文件合并为一个json

合并COCO数据集JSON文件的Python脚本 1、目的2、功能概述3、使用方法4、注意事项5、 代码部分 1、目的 此Python脚本旨在帮助用户合并多个COCO格式的数据集JSON文件&#xff0c;特别适用于将验证集和测试集的标注数据整合到单一文件中。 该脚本假设各个数据集的类别信息&…

OpenCV中的GrabCut图像分割算法的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 功能描述 GrabCut 算法是一种用于图像分割的技术&#xff0c;由 Carsten Rother、Vladimir Kolmogorov 和 Andrew Blake 在 2004 年 SIGGRAPH 会议的论文《…

Pr 2024下载安装,Adobe Premiere pro2024剪辑软件下载合集获取

Premiere Pro 2023中文版简称Pr&#xff0c;pr2023是一款视频编辑软件。 pr 2023不仅可以帮助用户对各种视频进行剪辑、旋转、分割、合并、字幕添加、背景音乐等基础的处理&#xff0c;还能帮助用户进行视频颜色校正、颜色分级、稳定镜头、调整层、更改片段的持续时间和速度、效…

软件架构之基于中间件开发

软件架构之基于中间件开发 第 15 章&#xff1a;基于中间件的开发15.1 中间件技术15.1.1 中间件的概念15.1.2 中间件的分类 15.1.3 中间件产品介绍15.2 应用服务器技术15.2.1 应用服务器的概念15.2.2 主要的应用服务器15.3.1 表示层15.3.2 应用服务层 15.4 .NET15.4.1 .NET 平台…

LeetCode热题100刷题16:74. 搜索二维矩阵、33. 搜索旋转排序数组、153. 寻找旋转排序数组中的最小值、98. 验证二叉搜索树

74. 搜索二维矩阵 class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {int row matrix.size();int col matrix[0].size();for(int i0;i<row;i) {//先排除一下不存在的情况if(i>0&&matrix[i][0]>target…

自动驾驶车道线检测系列—3D-LaneNet: End-to-End 3D Multiple Lane Detection

文章目录 1. 摘要概述2. 背景介绍3. 方法3.1 俯视图投影3.2 网络结构3.2.1 投影变换层3.2.2 投影变换层3.2.3 道路投影预测分支 3.3 车道预测头3.4 训练和真实值关联 4. 实验4.1 合成 3D 车道数据集4.2 真实世界 3D 车道数据集4.3 评估结果4.4 评估图像仅车道检测 5. 总结和讨论…

技能 | postman接口测试工具安装及使用

哈喽小伙伴们大家好!今天来给大家分享一款轻量级,高效好用的接口测试工具-postman. Postman是一个流行的API开发工具&#xff0c;主要用于测试、开发和文档化API。以下是关于Postman的介绍及其主要使用场景&#xff1a; Postman介绍&#xff1a; 1. 功能丰富的API客户端&#…

【14】Github Copilot环境搭建

环境搭建 这里以Visual Studio Code为例&#xff0c;安装好vs code&#xff0c;打开扩展侧边菜单栏&#xff0c;搜索“Github Copilot”&#xff0c;会出现如下图的两个插件&#xff0c;点击安装第一个&#xff0c;另一个会附带一起安装&#xff0c;然后弹出提示重新启动vs co…

怎么调整硬盘分区?让电脑运行更加高效!

硬盘分区是电脑存储管理的重要组成部分&#xff0c;合理的分区设置不仅能提高数据管理的效率&#xff0c;还能在一定程度上提升系统的运行性能。然而&#xff0c;随着使用需求的变化&#xff0c;我们可能需要对已有的硬盘分区进行调整。那么&#xff0c;我们该怎么调整硬盘分区…

zookeeper+kafka消息队列群集部署

消息队列(Message Queue)&#xff0c;是分布式系统中重要的组件&#xff0c;其通用的使用场景可以简单地描述为:当不需要立即获得结果&#xff0c;但是并发量又需要进行控制的时候&#xff0c;差不多就是需要使用消息队列的时候。 一、消息队列 1.什么是消息队列 消息(Messag…

Windows命令行(CMD)中,tasklist | findstr(搜索并显示包含特定字符串的进程信息)

文章目录 示例注意事项示例&#xff1a;使用 /FI 选项过滤进程 在Windows命令行&#xff08;CMD&#xff09;中&#xff0c; tasklist 命令用于显示当前运行的进程列表&#xff0c;而 findstr 命令则用于搜索字符串。当你将 tasklist 命令的输出通过管道&#xff08; |&…

支持大量边缘盒子集中管理调度的智慧物流开源了。

智慧物流视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒&#xff0c;省去繁琐重复的适配流程&#xff0c;实现芯片、算法、应用的全流程组合&#xff0c;从而大大减少企业级应用约95%的开发成本。用户只需在界面上…