Vue?click事件傳遞參數(shù)的示例教程

更新時(shí)間：2022年12月07日 10:44:08 作者：IT利刃出鞘

這篇文章主要介紹了Vue?click事件傳遞參數(shù)--方法/教程/實(shí)例,本文用示例介紹Vue中事件傳參的方法，采用click這個(gè)事件進(jìn)行展示，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

簡(jiǎn)介

說(shuō)明

本文用示例介紹Vue中事件傳參的方法。

Vue的事件用法為：v-on:click="xxx"?？梢杂聾click="xxx"來(lái)簡(jiǎn)寫。

本處采用click這個(gè)事件進(jìn)行展示，其他的事件也是一樣的。

官網(wǎng)

事件處理 — Vue.js

只傳自定義參數(shù)

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>
 
<body>
 
<div id="app">
    <button @click="clickHere('hello')">點(diǎn)我</button>
</div>
 
<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (param1) {
                console.log("參數(shù)：");
                console.log(param1);
            }
        }
    })
</script>
 
</body>
</html>

結(jié)果

只傳事件參數(shù)

不指定參數(shù)時(shí)，默認(rèn)會(huì)傳遞事件。當(dāng)然也可以通過(guò)$event來(lái)傳遞事件。

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>
 
<body>
 
<div id="app">
    <button @click="clickHere">點(diǎn)我</button>
    <!--等價(jià)于下邊這個(gè)-->
    <!--<button @click="clickHere($event)">點(diǎn)我</button>-->
</div>
 
<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (e) {
                console.log("事件：");
                console.log(e);
            }
        }
    })
</script>
 
</body>
</html>

結(jié)果

傳事件和自定義參數(shù)

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>
 
<body>
 
<div id="app">
    <button @click="clickHere($event, 'hello')">點(diǎn)我</button>
</div>
 
<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (event, param1) {
                console.log("事件：");
                console.log(event);
                console.log("參數(shù)：");
                console.log(param1);
            }
        }
    })
</script>
 
</body>
</html>

結(jié)果

動(dòng)態(tài)參數(shù)（從局部取值）

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>
 
<body>
 
<div id="app">
    <div v-for="hero in heros">
        <button @click="clickHere(hero.name)">點(diǎn)我</button>
    </div>
</div>
 
<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (param1) {
                console.log("參數(shù)：");
                console.log(param1);
            }
        },
        data: {
            heros: [{
                name: "Iron Man",
                age: 30
            }, {
                name: "Captain America",
                age: 40
            }]
        }
    })
</script>
 
</body>
</html>

結(jié)果

動(dòng)態(tài)參數(shù)（從全局?jǐn)?shù)據(jù)取值）

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>
 
<body>
 
<div id="app">
    <button @click="clickHere({message})">點(diǎn)我</button>
</div>
 
<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (param1) {
                console.log("參數(shù)：");
                console.log(param1);
            }
        },
        data: {
            message: "hello world"
        }
    })
</script>
 
</body>
</html>

結(jié)果