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

在这里插入图片描述

第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.mzph.cn/news/75576.shtml

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

相关文章

C++初阶--类和对象(中)

目录 类的6个默认成员函数构造函数使用方法 析构函数使用方法 拷贝构造函数使用方法 赋值运算符重载赋值运算符重载 const成员 上篇末尾我们讲到了关于c实现栈相较于c语言在传递参数时的一些优化&#xff0c;但实际上&#xff0c;c在 初始化 清理 赋值 拷贝等方面也做了很大程…

Java虚拟机(JVM)夺命20连问

博主介绍&#xff1a;✌全网粉丝3W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

Java voliate关键字常见面试题

1. 什么是 volatile 关键字&#xff1f;它的作用是什么&#xff1f; volatile 是 Java 中的关键字&#xff0c;用于声明一个变量是“易变”的&#xff0c;即可能被多个线程同时修改。它的主要作用是保证对该变量的读写操作具有可见性&#xff0c;即一个线程对该变量的修改对其…

Edit文本框支持回车Tab字符输入的方法C++源码

本篇文章属于《518抽奖软件开发日志》系列文章的一部分。 我在开发《518抽奖软件》&#xff08;www.518cj.net&#xff09;的时候&#xff0c;要在文本框里输入一行行的名单&#xff0c;要支持回车换行、Tab字符的输入。但是默认对话框上的文本框&#xff0c;是没法输入回车和T…

1.创建项目(wpf视觉项目)

目录 前言本章环境创建项目启动项目可执行文件 前言 本项目主要开发为视觉应用&#xff0c;项目包含&#xff08;视觉编程halcon的应用&#xff0c;会引入handycontrol组件库&#xff0c;工具库Masuit.Tools.Net&#xff0c;数据库工具sqlSugar等应用&#xff09; 后续如果还有…

信息化发展28

区块链概述 区块链技术具有多中心化存储、隐私保护、防篡改等特点&#xff0c; 提供了开放、分散和容错的事务机制&#xff0c; 成为新一代匿名在线支付、汇款和数字资产交易的核心&#xff0c; 被广泛应用于各大交易平台&#xff0c; 为金融、监管机构、科技创新、农业以及政…

Spine2D骨骼动画播放器 - 微信小程序版

Spine2D骨骼动画播放器 - 微信小程序版 简介平台支持 界面预览使用说明演示视频 版本笨笨的小目标&#xff08;废话&#xff09;参考资料测试文件百度盘分享 相关文档 简介 本播放器是SpinePlayer的微信小程序版。由于官方并没有提供现成的运行库&#xff0c;只能自己改造。 设…

ctfshow-web-web15 Fishman

0x00 前言 CTF 加解密合集CTF Web合集网络安全知识库溯源相关 文中工具皆可关注 皓月当空w 公众号 发送关键字 工具 获取 0x01 题目 0x02 Write Up 首先拿到题目&#xff0c;先扫描一下&#xff0c;发现一个www.zip 发现一个admin目录&#xff0c;访问一下&#xff1a; 在m…

【算法训练-字符串 三】最长公共子串、最长公共子序列

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是【】&#xff0c;使用【】这个基本的数据结构来实现&#xff0c;这个高频题的站点是&#xff1a;CodeTop&#xff0c;筛选条件为&#xff1a;目标公…

使用多线程或异步技术提高图片抓取效率

导语 图片抓取是爬虫技术中常见的需求&#xff0c;但是图片抓取的效率受到很多因素的影响&#xff0c;比如网速、网站反爬机制、图片数量和大小等。本文将介绍如何使用多线程或异步技术来提高图片抓取的效率&#xff0c;以及如何使用爬虫代理IP来避免被网站封禁。 概述 多线…

C++多态案例-设计计算器类

1.前置知识点 多态是面向对象的三大特性之一 多态分为两类 静态多态&#xff1a;函数重载和运算符重载都属于静态多态&#xff0c;复用函数名动态多态&#xff1a;派生类和虚函数实现运行时多态 静态多态和动态多态的区别 静态多态的函数地址早绑定-----编译阶段确定函数地…

Vim 插件应用篇 vim-plug:简洁高效的Vim插件管理工具

用插件管理插件 Vim-plug介绍 Vim-plug 是一个Vim插件管理器&#xff0c;利用异步并行可以快速地安装、更新和卸载插件。它的安装和配置都非常简单&#xff0c;而且在操作过程中会给出很多易读的反馈信息&#xff0c;是一个自由、开源、速度非常快的、并行地安装或更新插件&a…

Ukey连接虚拟前置机,浦银安盛基金用USB Server解决

浦银安盛基金一直使用物理前置机来连接Ukey&#xff0c;物理前置机维护管理不便&#xff0c;严重影响金融交易效率。因此&#xff0c;浦银安盛基金想要推进企业虚拟化&#xff0c;通过在虚拟机中部署前置机程序的方式&#xff0c;将前置机部署到虚拟机中。但虚拟机中的前置机&a…

shell脚本指令:for循环、函数、数组、grep等指令的使用

1、实现一个对数组求和的函数&#xff0c;数组通过实参传递给函数 2、写一个函数&#xff0c;输出当前用户的uid和gid 并使用变量接收结果 #!/bin/bash echo "请输入一个数组" read -a arr function add_arr() {var1${#arr[*]}for i in ${arr[*]} do((sumi))doner…

微信小程序上拉触底事件

一、什么是上拉触底事件 上拉触底是移动端的专有名词&#xff0c;通过手指在屏幕上的上拉滑动操作&#xff0c;从而加载更多数据的行为。 二、监听上拉触底事件 在页面的.js文件中&#xff0c;通过onReachBottom()函数即可监听当前页面的上拉触底事件。 三、配置上拉触底距…

设计模式-桥接模式(Bridge)

文章目录 前言一、桥接模式的概念二、桥接模式的实现三、桥接模式的优缺点1、优点&#xff1a;2、缺点&#xff1a; 前言 桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;用于将抽象部分和实现部分分离&#xff0c;使它们可以独立地变化。这…

QT 5.13保姆级安装教程

辨清关系 要想学习一个新的东西,我们必须知其事,达其理,悟其道,然后才能无往而不利也! 我们常听到QT、Qt Creator 和 Qt SDK ,这三者究竟是什么,他们之间的关系又是如何的?在安装QT之前我们先来了解一下他们之间的关系: Qt:Qt 是一个跨平台的 C++ 应用程序开发框架,…

解决mysql表不能查询修改删除等操作并出现卡死

问题现象1&#xff1a;进程wait卡住 测试环境mysql出现了一个怪表&#xff1a;select查询表卡死&#xff0c;alter修改表卡死&#xff0c;甚至我不想要这个表了&#xff0c;delete、truncate、drop表都卡死卡主了… 解决办法&#xff1a; >show full processlist;    /…

一生一芯10——verilator v5.008环境搭建

搜索 verilator 官网&#xff0c;得到网址如下&#xff1a; https://www.veripool.org/verilator/ 点击download 找到 git quick install 可以看到git快捷安装所需命令行 可以看到&#xff0c;需要预先安装下面的包文件&#xff0c;去掉前面的#注释符号进行安装 直接进行下面…

天津大数据培训学校 大数据可从事的行业

大数据行业近年来呈现出爆炸式的增长态势&#xff0c;各行各业都越来越依赖数据来指导业务决策和创新发展&#xff0c;因此&#xff0c;大数据专业人才的需求也随之增长。这种行业需求的增长为大数据就业提供了良好的机会&#xff0c;尤其是对于具备相关技能和知识的人来说。 …