溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue中怎么通過函數(shù)傳參數(shù)

發(fā)布時間：2023-05-09 14:43:24 來源：億速云 閱讀：115 作者：zzz 欄目：開發(fā)技術(shù)

本文小編為大家詳細介紹“vue中怎么通過函數(shù)傳參數(shù)”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當(dāng)，希望這篇“vue中怎么通過函數(shù)傳參數(shù)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

vue通過函數(shù)傳參數(shù)

一，通過點擊事件本身的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>

將所需要的參數(shù)直接@click=“toAddress(item.address)”，放在函數(shù)的括號內(nèi)傳遞。接受的時候如下：

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

二，通過自定義屬性傳參，我經(jīng)常用這種。

<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”傳遞過去。(這種方法小程序上經(jīng)常使用)接受的時候如下：

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事件函數(shù)傳參

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

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

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 如果事件直接綁定函數(shù)名稱，那么默認會傳遞事件對象作為事件函數(shù)的第一個參數(shù) -->
            <button v-on:click='handle1'>點擊1</button>
            <!-- 2、如果事件綁定函數(shù)調(diào)用，那么事件對象必須作為最后一個參數(shù)顯示傳遞，
                 并且事件對象的名稱必須是$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>```

讀到這里，這篇“vue中怎么通過函數(shù)傳參數(shù)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手