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

相关文章

  • VueX安装及使用基础教程

    VueX安装及使用基础教程

    这篇文章介绍了VueX安装及使用基础教程,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • Vue实现具备扫描和查看数据的二维码

    Vue实现具备扫描和查看数据的二维码

    在我们生活中,二维码的应用越来越广泛,特别是在移动互联网的时代,二维码成为了快速传达信息的一种利器,本文我们就来看看如何在Vue框架下,实现一个具备扫描和查看数据的二维码吧
    2023-05-05
  • vue中 v-for循环的用法详解

    vue中 v-for循环的用法详解

    这篇文章主要介绍了vue中 v-for循环的用法详解,本文通过实例代码的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • vue实现登录界面

    vue实现登录界面

    这篇文章主要为大家详细介绍了vue实现登录界面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • vue 动态设置img的src地址无效,npm run build 后找不到文件的解决

    vue 动态设置img的src地址无效,npm run build 后找不到文件的解决

    这篇文章主要介绍了vue 动态设置img的src地址无效,npm run build 后找不到文件的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue子路由跳转实现tab选项卡

    vue子路由跳转实现tab选项卡

    这篇文章主要为大家详细介绍了vue子路由跳转实现tab选项卡,完成一个简单的tab选项卡布局,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 深入解析vue中的权限管理

    深入解析vue中的权限管理

    权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源,这篇文章主要介绍了vue的权限管理的相关知识,需要的朋友可以参考下
    2022-06-06
  • 详解vue使用vue-layer-mobile组件实现toast,loading效果

    详解vue使用vue-layer-mobile组件实现toast,loading效果

    这篇文章主要介绍了详解vue使用vue-layer-mobile组件实现toast,loading效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 基于element-ui中el-select下拉框选项过多的优化方案

    基于element-ui中el-select下拉框选项过多的优化方案

    这篇文章主要介绍了基于element-ui中el-select下拉框选项过多的优化方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue3根据动态字段绑定v-model的操作代码

    Vue3根据动态字段绑定v-model的操作代码

    最近在学习vue技术,开发表格的时候,想把表格做成组件,那查询条件就需要动态生成,这就遇到一个问题,vue怎么动态给v-model变量值,本文通过实例代码给大家介绍,对Vue3动态绑定v-model实例代码感兴趣的朋友一起看看吧
    2022-10-10

最新评论