简体中文(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
轉載
1671 人瀏覽過

本篇文章為大家帶來了關於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學習者快速成長！