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

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

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

簡介

說明

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

Vue的事件用法為：v-on:click="xxx"?？梢杂聾click="xxx"來簡寫。

本處采用click這個事件進行展示，其他的事件也是一樣的。

官網(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')">點我</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ù)時，默認會傳遞事件。當然也可以通過$event來傳遞事件。

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>
 
<body>
 
<div id="app">
    <button @click="clickHere">點我</button>
    <!--等價于下邊這個-->
    <!--<button @click="clickHere($event)">點我</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')">點我</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é)果

動態(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)">點我</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é)果

動態(tài)參數(shù)（從全局數(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})">點我</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é)果