vue2.0 之事件处理器
Posted shhnwangjian
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2.0 之事件处理器相关的知识,希望对你有一定的参考价值。
事件绑定v-on(内置事件)
<template> <div> <a v-if="isPartA">partA</a> <a v-else>no data</a> <button v-on:click="toggle">toggle</button> <input @keydown.enter="onkeydown"> </div> </template> <script> export default { data () { return { isPartA: true } }, methods: { toggle () { this.isPartA = !this.isPartA }, onkeydown () { console.log(\'on key down\') } } } </script> <style> html { height: 100%; } </style>
回车,输出如下结果
备注:v-on简写为@
事件绑定v-on(自定义事件)
子组件hello.vue
<template> <div> {{ hello }} <button @click="emitMyEvent">emit</button> </div> </template> <script> export default { data () { return { hello: \'i am component hello\' } }, methods: { emitMyEvent () { this.$emit(\'my-event\', this.hello) } } } </script> <style scoped>/**/ h1 { height: 100px; } </style>
App,vue
<template> <div> <a v-if="isPartA">partA</a> <a v-else>no data</a> <button v-on:click="toggle">toggle</button> <input @keydown.enter="onkeydown"> <comH @my-event="onComhMyEvent"></comH> </div> </template> <script> import comH from \'./components/hello.vue\' export default { components: { comH }, data () { return { isPartA: true } }, methods: { toggle () { this.isPartA = !this.isPartA }, onkeydown () { console.log(\'on key down\') }, onComhMyEvent (parmformA) { console.log(\'onComhMyEvent\' + parmformA) } } } </script> <style> html { height: 100%; } </style>
点击emit按钮,输出结果如下
1、父组件App.vue引入hello.vue子组件
2、子组件定义emitMyEvent方法,调用父组件my-event自定义事件
3、App.vue中触发onComhMyEvent方法,在控制台生成日志内容
以上是关于vue2.0 之事件处理器的主要内容,如果未能解决你的问题,请参考以下文章