向父組件發出自定義事件

任何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，父組監聽的方式都是一樣的。

<HelloWorld @update='inputUpdated'/> 

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

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

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

<HelloWorld @update='inputUpdated($event)'/> 

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

<HelloWorld @update='inputUpdated'/> 
 
// ... 
 
methods: { 
    inputUpdated: (value) => { 
      console.log(value) // WORKS TOO 
    } 
} 

鼠標修飾符

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

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