vue基本事件处理实例分析-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

vue基本事件处理实例分析

本篇内容介绍了“vue基本事件处理实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联建站咨询电话:18980820575,为您提供成都网站建设网页设计及定制高端网站建设服务,创新互联建站网页制作领域十载,包括成都履带搅拌车等多个行业拥有多年的网站营销经验,选择创新互联建站,为网站锦上添花!

vue基本事件处理实例分析

Vue 事件处理是每个 Vue 项目的必要方面。它用于捕获用户输入,共享数据以及许多其他创造性方式。

基本事件处理

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



我们将介绍您可能想捕获的一些更常见的事件,单击此处以获取 DOM 事件的完整列表。

发出自定义事件

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

这样的一个示例是将数据从输入组件发送到父表单。

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

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

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

但是,Composition API 没有 this。相反,我们可以使用 Vue3 setup 方法直接访问 emit 方法。

setup 方法的第二个参数是上下文变量,它包含三个属性:attrs、slot 和 emit。

只要导入上下文对象,就可以使用与 Options API 相同的参数来调用 emit。

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

整理代码的一种方法是使用对象解构直接导入 emit。看起来像这样。

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

无论我们使用 Options API 还是 Composition API,我们的父组件都以相同的方式监听自定义事件。

如果我们发出的方法也传递了一个值,则可以用两种不同的方式捕获它-取决于我们是内联工作还是使用其他方法。

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

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