031:vue子组件向父组件传递多个参数,父组件2种解析方法

news2024/12/23 18:55:04

在这里插入图片描述

第031个

查看专栏目录: VUE ------ element UI


专栏目标

在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。

(1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等

(2)提供element UI的经典操作:安装,引用,国际化,el-row,el-col,el-button,el-link,el-radio,el-checkbox ,el-input,el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop,v-infinite-scroll, el-drawer等

本文章目录

    • 专栏目标
    • 需求背景
    • 传递一个参数:
    • 传递多个参数
      • 方法一:
      • 方法二:

需求背景

vue子组件使用$emit向父组件传值时,可以传递一个参数,也可以传递多个参数,那么父组件如何设置来获取到子组件传来的数据呢? 这里面有两种方法,具体的参考如下信息介绍。

传递一个参数:

子组件: 
submit(){ 
    this.$emit('submit',this.name) 
} 
父组件: 
<foods  @submit="handelFoods"></foods> 
 
父组件的方法中接收参数: 
handelFoods(e) { 
    console.log(e) 
} 

传递多个参数

方法一:

子组件: 
submit(){  
 this.$emit('submit',this.meat,this.vegetable) 
} 
 
父组件: 
<foods  @submit="handelFoods(arguments)"></foods> 
 
父组件的方法中接收参数: 
handelFoods(e) { 
    // e[0]:第一个参数    e[1]  第二个参数 
    console.log(e[0],e[1]) 
} 

方法二:

子组件: 
submit(){  
 this.$emit('submit',this.meat,this.vegetable) 
} 
 
父组件: 
<foods  @submit="handelFoods"></foods> 
 
handelFoods(e1,e2) { 
    // e1:第一个参数    e2 第二个参数 
    console.log(e1,e2) 
} 

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

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

相关文章

6个超好用的视频素材网站,4K/8K高质量,免费下载。

很多视频剪辑和做自媒体的朋友都不知道去哪里找视频素材&#xff0c;而且很多网站的素材可以免费下载但是不能商用&#xff0c;还有需要付费购买使用。下面推荐几个良心网站&#xff0c;视频素材免费下载&#xff0c;还能商用&#xff0c;赶紧收藏起来吧。 1、菜鸟图库 https:…

基于Python和mysql开发的在线音乐网站系统(源码+数据库+程序配置说明书+程序使用说明书)

一、项目简介 本项目是一套基于Python和mysql开发的在线音乐网站系统(&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Python学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经…

qt 正则表达式

以上是正则表达式的格式说明 以下是自己写的正则表达式 22-25行 是一种设置正则表达式的方式&#xff0c; 29-34行 : 29行 new一个正则表达式的过滤器对象 30行 正则表达式 的过滤格式 这个格式是0-321的任意数字都可以输入 31行 将过滤格式保存到过滤器对象里面 32行 将验…

VSCode搭建Django开发环境

文章目录 一、Django二、搭建步骤1. 安装python和VSCode&#xff0c;安装插件2. VSCode打开项目文件夹3. 终端中键入命令&#xff1a;建立虚拟环境4. 选择Python的解释器路径为虚拟环境5. 在虚拟环境中安装Django6.创建Django项目7. 创建app应用8. 运行应用9. 修改配置中文显示…

JVM 虚拟机 ----> Java 类加载机制

文章目录 JVM 虚拟机 ----> Java 类加载机制一、概述二、类的生命周期1、类加载过程&#xff08;Loading&#xff09;&#xff08;1&#xff09;加载&#xff08;2&#xff09;验证&#xff08;3&#xff09;准备&#xff08;4&#xff09;解析&#xff08;5&#xff09;初始…

纯小白安卓刷机1

文章目录 常见的英文意思刷机是什么&#xff1f;为什么要刷机&#xff1f;什么是BL锁&#xff08;BootLoader锁&#xff09;&#xff1f;我的机能够刷机吗&#xff1f;什么是Boot镜像/分区&#xff1f;什么是Recovery镜像/分区&#xff08;缩写为rec&#xff09;&#xff1f;什…

2023-2024年最值得选的Java毕业设计选题大全:2000个热门选题推荐

一、前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; 毕业设计选题非常重要&a…

【数仓建设系列之五】数仓选型架构概览

【数仓建设系列之五】实时数仓选型架构概览 离线数仓&#xff08;Offline Data Warehouse&#xff09;和实时数仓&#xff08;Real-time Data Warehouse&#xff09;是数仓领域两种常见的数据存储和处理架构&#xff0c;它们在数据处理的方式、目标和时间性上有所不同&#xff…

web端三维重建算法-colmap++

vismap vismap 是colmap 版本 &#xff08;1&#xff09; 支持superpoint superglue &#xff08;2&#xff09; 支持netvlad 图像检索 &#xff08;3&#xff09;支持特征点尺度定权 &#xff08;4&#xff09;支持二维码定位 &#xff08;5&#xff09;支持融合gps &#x…

穿破行业增长迷雾,云鲸J4为何能成为“破题之钥”?

文 | 螳螂观察 作者 | 青月 这几年&#xff0c;消费者对于产品的需求一直在变。 像汽车&#xff0c;过去的消费者可能更看重车的安全性、油耗低等&#xff0c;可如今再看消费者对车的需求&#xff0c;车联网服务、自动辅助驾驶等过去被视为“边缘”的能力&#xff0c;正在变…

虚拟机Ubuntu操作系统最基本终端命令(安装包+详细解释+详细演示)

虚拟机及乌班图&#xff08;Ubuntu操作系统&#xff09; 提示&#xff1a;大家需要软件的可以直接在此链接中提取 链接&#xff1a;https://pan.baidu.com/s/1_4VHGTlXjIuVhBINeOuBCA 提取码&#xff1a;nd0c 文章目录 虚拟机及乌班图&#xff08;Ubuntu操作系统&#xff09;终…

医院不良事件管理系统源码 鱼骨图分析 跌倒事件、压疮事件、坠床事件等系统检测,智能上报

医疗不良事件报告系统源码 医疗不良事件报告系统源码旨在建立全面的、统一的医疗不良事件标准分类系统和患者安全术语&#xff0c;使不良事件上报管理更加标准化和科学化。通过借鉴国内外医疗不良事件报告系统的先进经验&#xff0c;根据医疗不良事件的事件类型、处理事件的不…

Linux高性能服务器编程 学习笔记 第二章 IP协议详解

本章从两方面探讨IP协议&#xff1a; 1.IP头部信息。IP头部出现在每个IP数据报中&#xff0c;用于指定IP通信的源端IP地址、目的端IP地址&#xff0c;指导IP分片和重组&#xff0c;指定部分通信行为。 2.IP数据报的路由和转发。IP数据报的路由和转发发生在除目标机器外的所有主…

【SSH】如何删掉远程服务器中的虚拟环境?如何删掉远程服务器中的用户?如何删掉某个文件夹?

文章目录 一、如何删掉远程服务器中的虚拟环境&#xff1f;二、如何删掉远程服务器中的用户&#xff1f;三、如何删掉某个文件夹&#xff1f; 一、如何删掉远程服务器中的虚拟环境&#xff1f; 在Linux系统下删除conda虚拟环境&#xff1a; # 删除虚拟环境 conda remove -n y…

Nginx 中 location 和 proxy_pass 的斜杠问题

location 的斜杠问题比较好理解&#xff0c;不带斜杠的是模糊匹配。例如&#xff1a; location /doc 可以匹配 /doc/index.html&#xff0c;也可以匹配 /docs/index.html。 location /doc/ 强烈建议使用这种 只能匹配 /doc/index.html&#xff0c;不能匹配 /docs/index…

基于SSM的班主任助理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Linux 编译安装中的 configure 命令

用了这么久的 Linux 系统&#xff0c;也许你会发现&#xff0c;在编译安装中&#xff0c;有的服务编译安装需要执行 configure 命令&#xff0c;而有的却不需要&#xff0c;这是为什么呢&#xff1f;也是不是像我一样一头雾水呢&#xff1f;其实这取决于服务的构建系统和配置方…

k8skubectl陈述式及声明式资源管理

k8s:kubectl陈述式及声明式资源管理 一、陈述式资源管理方法1.陈述式资源管理概念2.基本信息查看&#xff08;1&#xff09;查看版本信息&#xff08;2&#xff09;查看资源对象简写&#xff08;3&#xff09;查看集群信息&#xff08;4&#xff09;配置kubectl自动补全&#x…

搭建个人博客系统

效果图&#xff1a; 博客网址&#xff1a; 行秋http://8.137.35.5:8093/#/Home源码链接&#xff1a; QiuShicheng/Qiu-blog (github.com)https://github.com/QiuShicheng/Qiu-blog 视频参考&#xff1a; B站最通俗易懂手把手SpringBootVue项目实战-前后端分离博客项目-Java…

数据结构基础6:二叉树的实现和堆。

二叉树的概念和应用&#xff1a; 一.树的概念和结构&#xff1a;一.树的概念和结构&#xff1a;1.树的概念&#xff1a;2.树的相关概念&#xff1a;3.树的表示&#xff1a; 二.二叉树的概念和结构&#xff1a;1.概念&#xff1a;2.两种特殊的二叉树&#xff1a;1.完全二叉树&am…