返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中$emit传递多个参(arguments和$event)
  • 414
分享到

vue中$emit传递多个参(arguments和$event)

vue$emit传递多个参vue$emit传递参数 2023-02-02 12:02:10 414人浏览 泡泡鱼
摘要

目录前言1.只有子组件传值(单个、多个)写法一:(自由式)写法二:(arguments写法)2.子组件传值,父组件也传值前言 使用 $emit 从子组件传递数据到父组件时,主要有以下

前言

使用 $emit 从子组件传递数据到父组件时,主要有以下3类情况

1.只有子组件传值(单个、多个)

写法一:(自由式)

// child组件,在子组件中触发事件
this.$emit('handleFather', '子参数1','子参数2','子参数3')
// father组件,在父组件中引用子组件
<child @handleFather="handleFather"></child>
<script>
export default {
   components: {
    child,
   }
   methods: {
     handleFather(param1,param2,param3) {
         console.log(param) // 
     }
   }
 }
 </script>

解析:

  • 只有子组件传值;
  • 注意@引用函数不需要加“括号”;
  • 子组件传值和父组件方法的参数一一对应。

写法二:(arguments写法)

// child组件,在子组件中触发事件并传多个参数
this.$emit('handleFather', param1, param2,)
//father组件,在父组件中引用子组件
<child @handleFather="handleFather(arguments)"></child>
<script>
  export default {
    components: {
     child,
    }
    methods: {
      handleFather(param) {
          console.log(param[0]) //获取param1的值
          console.log(param[1]) //获取param2的值
      }
    }
  }
</script>

解析:

  • 只有子组件传值;
  • 注意@引用函数添加“arguments”值;
  • 打印出子组件传值的数组形式。

2.子组件传值,父组件也传值

写法一:

// child组件,在子组件中触发事件
this.$emit('handleFather', '子参数对象')
//father组件,在父组件中引用子组件
<child @handleFather="handleFather($event, fatherParam)"></child>
 
<script>
 export default {
   components: {
    child,
   }
   methods: {
     handleFather(childObj, fatherParam) {
         console.log(childObj) // 打印子组件参数(对象)
         console.log(fatherParam) // 父组件参数
     }
   }
 }
</script>

写法二:

// child组件,在子组件中触发事件并传多个参数
this.$emit('handleFather', param1, param2,)
//father组件,在父组件中引用子组件
<child @handleFather="handleFather(arguments, fatherParam)"></child>

<script>
 export default {
   components: {
    child,
   }
   methods: {
     handleFather(childParam, fatherParam) {
         console.log(childParam) //获取arguments数组参数
         console.log(fatherParam) //获取fatherParam
     }
   }
 }
</script>

总结

  • 只有子组件传参,@调用方法不使用“括号”
  • 特殊使用“arguments”和“$event”,
  • arguments 获取子参数的数组
  • $event 获取自定义对象,满足传多个参数

到此这篇关于Vue中$emit传递多个参(arguments和$event)的文章就介绍到这了,更多相关vue $emit传递多个参内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网! 

--结束END--

本文标题: vue中$emit传递多个参(arguments和$event)

本文链接: https://lsjlt.com/news/193920.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue中$emit传递多个参(arguments和$event)
    目录前言1.只有子组件传值(单个、多个)写法一:(自由式)写法二:(arguments写法)2.子组件传值,父组件也传值前言 使用 $emit 从子组件传递数据到父组件时,主要有以下...
    99+
    2023-02-02
    vue $emit传递多个参 vue $emit传递参数
  • ajax中怎么传递多个参数
    今天就跟大家聊聊有关ajax中怎么传递多个参数,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。具体内容如下<html > <...
    99+
    2024-04-02
  • 在mapper中如何传递多个参数
    这篇文章将为大家详细讲解有关在mapper中如何传递多个参数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在mapper中如何传递多个参数方法1:顺序传参法public&...
    99+
    2024-04-02
  • vue和js怎么传递参数
    Vue 和 JavaScript 是两个不同的技术,但它们经常一起使用。在 Vue 中,传递参数的方式与传递参数的方式在 JavaScript 中是相同的。本文将介绍 Vue 和 JavaScript 中传递参数的方法。Vue 中传递参数的...
    99+
    2023-05-24
  • Vue的指令中实现传递更多参数
    目录概要基本原理基于闭包的扩展方案实例和代码实现Main.js中将指令对应的插件全局化ImageLoad插件定义图片加载管理类的定义Vue 3.0的实现概要 我们在使用Vue的开发项...
    99+
    2024-04-02
  • Vue中mapMutations传递参数方式
    目录通过子组件定义的方法传递参数在…mapMutations引用当然也可以写直接传递关于mapMutations的作用通过子组件定义的方法传递参数 在…m...
    99+
    2024-04-02
  • 怎么使用mapper传递多个参数
    使用Mapper传递多个参数可以通过以下两种方式实现:1. 使用Map类型作为参数在Mapper接口方法中,使用Map类型作为参数,...
    99+
    2023-10-12
    mapper
  • java方法怎么传递多个参数
    在Java中,可以使用以下几种方式传递多个参数给方法:1. 通过定义多个参数变量进行传递:```javapublic void me...
    99+
    2023-08-08
    java
  • iOS中perform+@selector多参数传递
    在iOS中,使用performSelector方法可以调用一个方法,但是只能传递一个参数。如果需要传递多个参数,可以通过将参数封装为...
    99+
    2023-09-09
    iOS
  • Vue的指令中如何实现传递更多参数
    本篇内容主要讲解“Vue的指令中如何实现传递更多参数”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue的指令中如何实现传递更多参数”吧!基本原理本文介绍的指令扩展方法,主要以闭包为基础,并且使...
    99+
    2023-06-30
  • 怎么向jquery函数传递多个参数
    这篇文章主要讲解了“怎么向jquery函数传递多个参数”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么向jquery函数传递多个参数”吧!   // D...
    99+
    2024-04-02
  • 关于vue中路由的跳转和参数传递,参数获取
    目录vue中的路由讲三点html中通过<router-link>指令完成路由跳转第一种情况就是以path形式第二种情况就是以路由对象Object的形式最后谈谈$route...
    99+
    2024-04-02
  • ajax传递多个参数具体实现方式
    这篇文章主要介绍“ajax传递多个参数具体实现方式”,在日常操作中,相信很多人在ajax传递多个参数具体实现方式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”ajax传递多个...
    99+
    2024-04-02
  • vue 中 get / delete 传递数组参数方法
    在前后端交互的时候,有时候需要通过 get 或者 delete 传递一个数组给后台,但是这样直接传递后台无法接收数据,因为在传递的过程中数组参数会被转译,结果如下: 参数...
    99+
    2024-04-02
  • Vue中mapMutations传递参数方式是什么
    本篇内容主要讲解“Vue中mapMutations传递参数方式是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue中mapMutations传递参数方式是什么”吧!通过子组件定义的方法传递...
    99+
    2023-06-30
  • 如何使用 PHP 可变函数参数传递多个参数?
    php可变函数参数传递多个参数的方式如下:使用[...]运算符声明函数,该运算符指示函数可以接收任意数量的参数。使用的语法的形式为:function my_function(...$ar...
    99+
    2024-04-10
    php 可变函数参数
  • Mybatis怎么传递多个不同类型的参数
    这篇文章主要介绍了Mybatis怎么传递多个不同类型的参数的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Mybatis怎么传递多个不同类型的参数文章都会有所收获,下面我们一起来看看吧。Mybatis传递多个不同...
    99+
    2023-07-05
  • vue跳转页面和参数传递怎么实现
    本篇内容介绍了“vue跳转页面和参数传递怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!要实现一个功能:从页面A跳转到页面B,并且页面...
    99+
    2023-06-30
  • vue中怎么实现组件间参数传递
    vue中怎么实现组件间参数传递,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。举例说明例如:element-ui组件库中使用switch开关...
    99+
    2024-04-02
  • vue中路由参数传递的示例分析
    这篇文章主要为大家展示了“vue中路由参数传递的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中路由参数传递的示例分析”这篇文章吧。首先我的路由的...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作