脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue中通过函数传参数

vue中如何通过函数传参数

 更新时间：2023年04月06日 08:37:37   作者：前端小问题  
这篇文章主要介绍了vue中如何通过函数传参数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue通过函数传参数

一，通过点击事件本身的js特性传参。

<view class="center_menu">
                <view class="menu_item" v-for="item in menus" @click="toAddress(item.address)">
                    <image :src="item.icon" mode="aspectFill" ></image>
                    <text>{{item.name}}</text>
                </view>
            </view>

将所需要的参数直接@click=“toAddress(item.address)”，放在函数的括号内传递。接受的时候如下：

methods: {
            toAddress (e){
                console.log(e);
            }
        },

二，通过自定义属性传参，我经常用这种。

<view class="order_status">
                    <view class="status" v-for="item in status" @click="toAddress" data-id="1">
                        <image class="icon" :src="item.url" mode="aspectFill"></image>
                        <text>{{item.name}}</text>
                    </view>
                </view>

通过自定义属性data-id将字符串“1”传递过去。(这种方法小程序上经常使用)接受的时候如下：

methods: {
            toAddress (e){
                console.log(e.currentTarget.dataset.id);
            }
        },

三，将事件本身传递过去。

<view class="order_status">
                    <view class="status" v-for="item in status" @click="toAddress($event)" data-id="1">
                        <image class="icon" :src="item.url" mode="aspectFill"></image>
                        <text>{{item.name}}</text>
                    </view>
                </view>
methods: {
            toAddress (e){
                console.log(e);
            }
        },

vue事件函数传参

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
            <button v-on:click='handle1'>点击1</button>
            <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
                 并且事件对象的名称必须是$event 
            -->
            <button v-on:click='handle2(123, 456, $event)'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>
</body>

</html>```

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue3实战-axios请求封装问题(get、post、put、delete)

    vue3实战-axios请求封装问题(get、post、put、delete)

    这篇文章主要介绍了vue3实战-axios请求封装问题(get、post、put、delete)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • vue组件开发props验证的实现

    vue组件开发props验证的实现

    这篇文章主要介绍了vue组件开发props验证的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • uni-app自定义组件详细代码示例

    uni-app自定义组件详细代码示例

    组件是vue技术中非常重要的部分,组件使得与ui相关的轮子可以方便的制造和共享,进而使得vue使用者的开发效率大幅提升,这篇文章主要给大家介绍了关于uni-app自定义组件的相关资料,需要的朋友可以参考下
    2024-02-02
  • 关于Vue3&TypeScript的踩坑汇总

    关于Vue3&TypeScript的踩坑汇总

    这篇文章主要介绍了关于Vue3&TypeScript的踩坑汇总，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • 解决Vue.js Devtools未检测到Vue实例的问题

    解决Vue.js Devtools未检测到Vue实例的问题

    在开发Vue.js应用时,Vue.js Devtools是一个不可或缺的调试工具,然而,有时我们可能会遇到“Vue.js not detected”的提示,这意味着Vue.js Devtools未能成功识别和连接到我们的Vue应用,本文将详细解析这个问题,并提供相应的解决步骤与代码示例,需要的朋友可以参考下
    2024-01-01
  • vue使用swiper.js重叠轮播组建样式

    vue使用swiper.js重叠轮播组建样式

    这篇文章主要为大家详细介绍了vue使用swiper.js重叠轮播组建样式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • vue全局引入scss(mixin)

    vue全局引入scss(mixin)

    本文主要介绍了 vue全局引入scss,我们在写VUE的时候,会使用scss，也会做一些通用样式,方便使用,在写好的通用样式的时候,每次都要单文件导入,刚开始写的时候,感觉还好,后面工程量大了后,就显得麻烦,那么本文就全局导入scss样式,下面来看详细内容,需要的朋友可以参考一下
    2021-11-11
  • Springboot运用vue+echarts前后端交互实现动态圆环图

    Springboot运用vue+echarts前后端交互实现动态圆环图

    我们做项目的时候，常常需要一些统计图来展示我们的数据，作为web开发人员，会实现统计图是我们必会的技能。我将带大家来实现动态饼图的实现，感兴趣的可以了解一下
    2021-06-06
  • Vue+Three加载glb文件报错问题及解决

    Vue+Three加载glb文件报错问题及解决

    当使用Three.js加载GLB模型时,遇到加载错误常常是路径问题,解决方案：1. 将GLB模型文件置于public目录,避免打包时路径编码变化；2. 从node_modules的three库中复制draco解码器至public目录；3. 确认场景、摄像机和光源设置正确
    2024-10-10
  • vue3.0 项目搭建和使用流程

    vue3.0 项目搭建和使用流程

    这篇文章主要介绍了vue3.0 项目搭建和使用流程，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
    2021-03-03

最新评论