成都网站建设设计

将想法与焦点和您一起共享

使用Vue怎么进行事件处理

今天就跟大家聊聊有关使用Vue怎么进行事件处理,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

在锡林浩特等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、成都网站建设 网站设计制作按需定制设计,公司网站建设,企业网站建设,成都品牌网站建设,全网营销推广,成都外贸网站建设,锡林浩特网站建设费用合理。

基本事件处理

使用v-on指令(简称@),我们可以监听DOM事件并运行处理程序方法或内联Javascript。

// v-on 指令


// OR

向父组件发出自定义事件

任何Web框架中的常见用例都是希望子组件能够向其父组件发出事件,这也是双向数据绑定原理。

常见一个示例是将数据从 input组件发送到父表单。

根据我们使用的是Options API还是Composition API,发出事件的语法是不同的。

在 Options API 中,我们可以简单地调用this.$emit(eventName, payload) ,示例如下:

export default {
  methods: {
    handleUpdate: () => {
      this.$emit('update', 'Hello World')
    }
  }
}

但是,Composition API 使用方式与此不同。 需要在 Vue3 提供的 setup方法使用emit方法。

只要导入context对象,就可以使用与Options API相同的参数调用emit

export default {
  setup (props, context) {
    const handleUpdate = () => {
      context.emit('update', 'Hello World')
    }

    return { handleUpdate }
  } 
}

当然,我在项目中经常使用解构的方式来使用:

export default {
  setup (props, { emit }) {
    const handleUpdate = () => {
      emit('update', 'Hello World')
    }

    return { handleUpdate }
  } 
}

完美!

无论我们使用Options 还是 Composition API,父组监听的方式都是一样的。

首先,我们可以在模板中使用$ event访问传递的值。

如果在组件 emit 出去方法有传递值,我们可以通过两种不同的方式捕获它,这取决于我们是使用内联还是使用方法。

第一种是在模板中使用$event访问传递的值。

第二,使用方法来处理事件,则传递的值将作为第一个参数自动传递给我们的方法。



// ...

methods: {
    inputUpdated: (value) => {
      console.log(value) // WORKS TOO
    }
}

鼠标修饰符

下面是我们可以在v-on指令中捕获的主要DOM鼠标事件列表:


Interact with Me!

对于单击事件,我们还可以添加鼠标事件修饰符来限制哪个鼠标按钮将触发我们的事件。有三个: leftrightmiddle


 Left 

键盘修饰符

我们可以听三个DOM键盘事件:

通常,我们想检测某个键上的这些事件,有两种方法可以执行此操作。

  • keycodes

  • Vue具有某些键的别名(enter, tab, delete, esc, space, up, down, left, right)





系统修饰符

对于某些项目,我们可能只想在用户按下修饰键的情况下触发事件。 修饰键类似于Commandshift

在Vue中,有四个系统修饰符。

  • shift

  • alt

  • ctrl

  • meta (在mac上是CMD,在Windows上是Windows键)

这对于在Vue应用程序中创建诸如自定义键盘快捷键之类的功能非常有用。


在Vue文档中,还有一个exact的修饰符,以确保仅在按下我们指定的键且没有其他键的情况下才触发事件。


事件修饰符

对于所有DOM事件,我们可以使用一些修饰符来更改其运行方式。 无论是停止传播还是阻止默认操作,Vue都有两个内置的DOM事件修饰符。











看完上述内容,你们对使用Vue怎么进行事件处理有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


网页标题:使用Vue怎么进行事件处理
标题网址:http://chengdu.cdxwcx.cn/article/ghjjce.html

其他资讯