Vue.js的事件绑定–内置事件绑定、自定义事件绑定

web前端|js教程

切换

可以简写为

切换

内置事件绑定

阻止冒泡的事件

切换

常用的事件修改器:keydown

@keydown输入框输入内容或者内容更改都会触发执行

...... export default { methods: { onkeydown () { console.log('on key down') } } }

通过指定修改器 @keydown.enter当敲击键盘enter时触发执行
也可以采用keycode : 如,@keydown.13;获得相同的效果

//这两个效果一样...... export default { methods: { onkeydown () { console.log('on key down') } } }

自定义事件绑定

自定义事件绑定一般用在自定义组件上
在自定义组件a.vue上代码如下

export default { data () { return { hello: 'I am componnet a' } }, methods: { emitMyEvent () {// 触发自定义事件 my-event 并传递一个参数 this.hello this.$emit('my-event', this.hello) } } }

在调用的组件中

import comA from './components/a.vue' export default { components: {comA}, methods: {// parmfromA为传递过来的参数 onComaMyEvent (parmfromA) { console.log(parmfromA) } } }