技術標籤：大前端vuesyncjshtml大前端

說說vue的自定義事件

文章目錄

• 說說vue的自定義事件
• • 基本語法格式
  • .sync修飾符

基本語法格式

子元件：

methods:{
	send(){
		this.$emit('my-event')
	}
}

父元件接受自定義事件並設定觸發對應事件

<my-component @my-event="doSomething"></my-component>

不同於元件和prop,時間名不會被用作一個JavaScript變數名或property 名，所以就沒有理由使用 camelCase 或 PascalCase 了。並且 v-on 事件監聽器在 DOM 模板中會被自動轉換為全小寫 (因為 HTML 是大小寫不敏感的)，所以 v-on:myEvent 將會變成 v-on:myevent——導致 myEvent 不可能被監聽到。

因此，我們推薦你始終使用 kebab-case 的事件名。

.sync修飾符

在有些情況下，我們可能需要對一個 prop 進行“雙向繫結”。不幸的是，真正的雙向繫結會帶來維護上的問題，因為子元件可以變更父元件，且在父元件和子元件都沒有明顯的變更來源。

這也是為什麼我們推薦以 update:myPropName 的模式觸發事件取而代之。舉個例子，在一個包含 title prop 的假設的元件中，我們可以用以下方法表達對其賦新值的意圖：

this.$emit('update:title', newTitle)

然後父元件可以監聽那個事件並根據需要更新一個本地的資料 property。例如：

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

vue為這種模式提供了一個語法糖 .sync修飾符

<text-document v-bind:title.sync="doc.title"></text-document>

當我們用一個物件同時設定多個 prop 的時候，也可以將這個 .sync 修飾符和 v-bind 配合使用：

<
 
text-document v-bind.sync="doc"></text-document>

這樣會把 doc 物件中的每一個 property (如 title) 都作為一個獨立的 prop 傳進去，然後各自新增用於更新的 v-on 監聽器。