vue定义自定义事件方法、事件传值及事件对象

vue

1.自定义事件 例如v-on:click="run" 或者 @click="run"

<template>

<div id="app">

<button @click="run">自定义事件</button>

</div>

</template>

<script>

export default {

name: "app",

data() {

return {

};

},

methods:{

run() {

alert('我是自定义事件');

}

}

};

</script>

<style>

</style>

效果:

2.自定义事件传值 @click="run('123')"

<template>

<div id="app">

<button @click="run('123')">自定义事件</button>

</div>

</template>

<script>

export default {

name: "app",

data() {

return {

};

},

methods:{

run(val) {

alert(val);

}

}

};

</script>

<style>

</style>

效果:

 3.事件对象@click="run($event)"

<template>

<div id="app">

<button @click="run($event)">自定义事件</button>

</div>

</template>

<script>

export default {

name: "app",

data() {

return {

};

},

methods:{

run(e) {

console.log(e);

}

}

};

</script>

<style>

</style>

 效果:

以上是 vue定义自定义事件方法、事件传值及事件对象 的全部内容, 来源链接: utcz.com/z/380393.html

回到顶部