本文實例講述了Vue自定義屬性。分享給大家供大家參考，具體如下：

1 事件名

跟組件和 prop 不同，事件名不存在任何自動化的大小寫轉換。而是觸發的事件名需要完全匹配監聽這個事件所用的名稱。舉個例子，如果觸發一個 camelCase 名字的事件：

this.$emit('myEvent')

則監聽這個名字的 kebab-case 版本是不會有任何效果的：

<my-component v-on:my-event="doSomething"></my-component>

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

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

2 自定義組件的 v-model

2.2.0+ 新增

一個組件上的 v-model 默認會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復選框等類型的輸入控件可能會將 value 特性用于不同的目的。model 選項可以用來避免這樣的沖突：

Vue.component('base-checkbox', {  model: {    prop: 'checked',    event: 'change'  },  props: {    checked: Boolean  },  template:      `      <input        type="checkbox"        v-bind:checked="checked"        v-on:change="$emit('change',$event.target.checked)"      >      `});

現在在這個組件上使用 v-model 的時候：

<base-checkbox v-model="loving"></base-checkbox>

這里的 loving 的值將會傳入這個名為 checked 的 prop。同時當 <base-checkbox> 觸發一個 change 事件并附帶一個新的值的時候，這個 loving 的屬性將會被更新。

注意你仍然需要在組件的 props 選項里聲明 checked 這個 prop。

3 將原生事件綁定到組件

你可能有很多次想要在一個組件的根元素上直接監聽一個原生事件。這時，你可以使用 v-on 的 .native 修飾符：

<base-input v-on:focus.native="onFocus"></base-input>

在有的時候這是很有用的，不過在你嘗試監聽一個類似 <input> 的非常特定的元素時，這并不是個好主意。比如上述<base-input>組件可能做了如下重構，所以根元素實際上是一個 <label> 元素：

<label>  {{ label }}  <input      v-bind=$attrs",      v-bind:value="value"      v-on:input="$emit('input',$event.target.value)"      ></label>