日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

Vue事件處理是每個Vue項目的必要方面。它用于捕獲用戶輸入，共享數(shù)據(jù)以及許多其他創(chuàng)造性方式。

成都創(chuàng)新互聯(lián)是一家集網站建設,本溪企業(yè)網站建設,本溪品牌網站建設,網站定制,本溪網站建設報價,網絡營銷,網絡優(yōu)化,本溪網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。

在本文中，會介紹基礎知識，并提供一些用于處理事件的代碼示例。它僅包含我認為最有用的技巧/方法，要深入了解Vue可以做的所有事情，請查看Vue文檔。

基本事件處理

使用v-on指令(簡稱@)，我們可以監(jiān)聽DOM事件并運行處理程序方法或內聯(lián)Javascript。

 
 
 
 

  
  
  
  
// v-on 指令
  
  
  
  

  
  
  
  

  
  
  
  
// OR
  
  
  
  

  
  
  
  

 
 
 
 

向父組件發(fā)出自定義事件

任何Web框架中的常見用例都是希望子組件能夠向其父組件發(fā)出事件，這也是雙向數(shù)據(jù)綁定原理。

常見一個示例是將數(shù)據(jù)從 input組件發(fā)送到父表單。

根據(jù)我們使用的是Options API還是Composition API，發(fā)出事件的語法是不同的。

在 Options API 中，我們可以簡單地調用this.$emit(eventName, payload),示例如下：

   
 
 
 

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

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

只要導入context對象，就可以使用與Options API相同的參數(shù)調用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，父組監(jiān)聽的方式都是一樣的。

首先，我們可以在模板中使用$ event訪問傳遞的值。

如果在組件 emit 出去方法有傳遞值，我們可以通過兩種不同的方式捕獲它，這取決于我們是使用內聯(lián)還是使用方法。

第一種是在模板中使用$event訪問傳遞的值。

第二，使用方法來處理事件，則傳遞的值將作為第一個參數(shù)自動傳遞給我們的方法。

   
 
 
 

    
  
  
  

    
  
  
  

    
  
  
  
// ...
    
  
  
  

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

鼠標修飾符

下面是我們可以在v-on指令中捕獲的主要DOM鼠標事件列表：

   
 
 
 

    
  
  
  

    
  
  
  
  @mousedown='handleEvent'
    
  
  
  
  @mouseup='handleEvent'
    
  
  
  
  @click='handleEvent'
    
  
  
  
  @dblclick='handleEvent'
    
  
  
  
  @mousemove='handleEvent'
    
  
  
  
  @mouseover='handleEvent'
    
  
  
  
  @mousewheel='handleEvent'
    
  
  
  
  @mouseout='handleEvent'
    
  
  
  
>
    
  
  
  
Interact with Me!