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

 更新时间:2023年02月02日 09:18:44   作者:清风细雨_林木木  
本文主要介绍了vue中$emit传递多个参(arguments和$event),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

使用 $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传递多个参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等

    Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等

    最近在学Vue和javascript感觉js的好多方法都不太清楚,这里彻底总结下,这篇文章主要给大家介绍了关于Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等的相关资料,需要的朋友可以参考下
    2024-01-01
  • vue多页面项目中路由使用history模式的方法

    vue多页面项目中路由使用history模式的方法

    这篇文章主要介绍了vue多页面项目中路由如何使用history模式,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue自定义组件如何添加使用原生事件

    vue自定义组件如何添加使用原生事件

    这篇文章主要介绍了vue自定义组件如何添加使用原生事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue-cli webpack 开发环境跨域详解

    vue-cli webpack 开发环境跨域详解

    本篇文章主要介绍了vue-cli webpack 开发环境跨域详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • vue如何调用浏览器分享功能详解

    vue如何调用浏览器分享功能详解

    这篇文章主要给大家介绍了关于vue如何调用浏览器分享的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • VUE3中h()函数和createVNode()函数的使用解读

    VUE3中h()函数和createVNode()函数的使用解读

    这篇文章主要介绍了VUE3中h()函数和createVNode()函数的使用解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue 解决computed修改data数据的问题

    vue 解决computed修改data数据的问题

    今天小编就为大家分享一篇vue 解决computed修改data数据的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue3如何解决Element-plus不生效的问题

    Vue3如何解决Element-plus不生效的问题

    这篇文章主要介绍了Vue3如何解决Element-plus不生效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3动态修改打包后的请求路径的操作代码

    vue3动态修改打包后的请求路径的操作代码

    这篇文章主要介绍了vue3动态修改打包后的请求路径,需要我们创建一个静态资源里的外部文件来实现,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue路由this.route.push跳转页面不刷新的解决方案

    Vue路由this.route.push跳转页面不刷新的解决方案

    这篇文章主要介绍了Vue路由this.route.push跳转页面不刷新的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-07-07

最新评论