简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > Vue.js > 正文

简单介绍vue基本事件处理

WBOY
发布： 2022-08-08 17:32:50
转载
1672 人浏览过

本篇文章给大家带来了关于vue的相关知识，其中主要介绍了关于基本事件处理的相关问题，Vue 事件处理是每个 Vue 项目的必要方面。它用于捕获用户输入，共享数据以及许多其他创造性方式。下面一起来看一下，希望对大家有帮助。

简单介绍vue基本事件处理

【相关推荐：javascript视频教程、vue.js教程】

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

在本文中，我将介绍基础知识，并提供一些用于处理事件的代码示例。

基本事件处理

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

<div v-on:click=&#39;handleClick&#39; />
<!-- 相当于 -->
<div @click=&#39;handleClick&#39; />
登录后复制

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

发出自定义事件

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

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

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

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

export default {
  methods: {
    handleUpdate() {
      this.$emit(&#39;update&#39;, &#39;Hello World&#39;)
    }
  }
}
登录后复制

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

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

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

export default {
  setup (props, context) {
    const handleUpdate = () => {
      context.emit(&#39;update&#39;, &#39;Hello World&#39;)
    }
    return { handleUpdate }
  } 
}
登录后复制

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

export default {
  setup (props, { emit }) {
    const handleUpdate = () => {
      emit(&#39;update&#39;, &#39;Hello World&#39;)
    }
    return { handleUpdate }
  } 
}
登录后复制

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

<HelloWorld @update=&#39;inputUpdated&#39;/>
登录后复制

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

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

<HelloWorld @update=&#39;inputUpdated($event)&#39;/>
登录后复制

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

<HelloWorld @update=&#39;inputUpdated&#39;/>

        

            

                
热门教程

                更多>
                
            

            

                

                    
相关教程 

                    
热门推荐

                    
最新课程

                

                
                
                
            

            
        


        

            

                
最新下载

                更多>
                
            

                        
            

                

                    
网站特效 

                    
网站源码

                    
网站素材

                    
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！