Vue 3.0 自定義事件

該頁(yè)面假設(shè)你已經(jīng)閱讀過(guò)了組件基礎(chǔ)。如果你還對(duì)組件不太了解，推薦你先閱讀它。

#事件名

不同于組件和 prop，事件名不存在任何自動(dòng)化的大小寫(xiě)轉(zhuǎn)換。而是觸發(fā)的事件名需要完全匹配監(jiān)聽(tīng)這個(gè)事件所用的名稱(chēng)。舉個(gè)例子，如果觸發(fā)一個(gè) camelCase 名字的事件：

this.$emit('myEvent')

則監(jiān)聽(tīng)這個(gè)名字的 kebab-case 版本是不會(huì)有任何效果的：

<!-- 沒(méi)有效果 -->
<my-component @my-event="doSomething"></my-component>

不同于組件和 prop，事件名不會(huì)被用作一個(gè) JavaScript 變量名或 property 名，所以就沒(méi)有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件監(jiān)聽(tīng)器在 DOM 模板中會(huì)被自動(dòng)轉(zhuǎn)換為全小寫(xiě) (因?yàn)?HTML 是大小寫(xiě)不敏感的)，所以 @myEvent 將會(huì)變成 @myevent——導(dǎo)致 myEvent 不可能被監(jiān)聽(tīng)到。

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

#定義自定義事件

在 Vue School 上觀看關(guān)于定義自定義事件的免費(fèi)視頻。

可以通過(guò) emits 選項(xiàng)在組件上定義已發(fā)出的事件。

app.component('custom-form', {
  emits: ['in-focus', 'submit']
})

當(dāng)在 emits 選項(xiàng)中定義了原生事件 (如 click) 時(shí)，將使用組件中的事件替代原生事件偵聽(tīng)器。

TIP

建議定義所有發(fā)出的事件，以便更好地記錄組件應(yīng)該如何工作。

#驗(yàn)證拋出的事件

與 prop 類(lèi)型驗(yàn)證類(lèi)似，如果使用對(duì)象語(yǔ)法而不是數(shù)組語(yǔ)法定義發(fā)出的事件，則可以驗(yàn)證它。

要添加驗(yàn)證，將為事件分配一個(gè)函數(shù)，該函數(shù)接收傳遞給 $emit 調(diào)用的參數(shù)，并返回一個(gè)布爾值以指示事件是否有效。

app.component('custom-form', {
  emits: {
    // 沒(méi)有驗(yàn)證
    click: null,


    // 驗(yàn)證submit 事件
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm() {
      this.$emit('submit', { email, password })
    }
  }
})

#v-model 參數(shù)

默認(rèn)情況下，組件上的 v-model 使用 modelValue 作為 prop 和 update:modelValue 作為事件。我們可以通過(guò)向 v-model 傳遞參數(shù)來(lái)修改這些名稱(chēng)：

<my-component v-model:foo="bar"></my-component>

在本例中，子組件將需要一個(gè) foo prop 并發(fā)出 update:foo 要同步的事件：

const app = Vue.createApp({})


app.component('my-component', {
  props: {
    foo: String
  },
  template: `
    <input 
      type="text"
      :value="foo"
      @input="$emit('update:foo', $event.target.value)">
  `
})

<my-component v-model:foo="bar"></my-component>

#多個(gè) v-model 綁定

通過(guò)利用以特定 prop 和事件為目標(biāo)的能力，正如我們之前在 v-model 參數(shù)中所學(xué)的那樣，我們現(xiàn)在可以在單個(gè)組件實(shí)例上創(chuàng)建多個(gè) v-model 綁定。

每個(gè) v-model 將同步到不同的 prop，而不需要在組件中添加額外的選項(xiàng)：

<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>

const app = Vue.createApp({})


app.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  template: `
    <input 
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">


    <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)">
  `
})

點(diǎn)擊此處實(shí)現(xiàn)

#處理 v-model 修飾符

在 2.x 中，我們對(duì)組件 v-model 上的 .trim 等修飾符提供了硬編碼支持。但是，如果組件可以支持自定義修飾符，則會(huì)更有用。在 3.x 中，添加到組件 v-model 的修飾符將通過(guò) modelModifiers prop 提供給組件：

當(dāng)我們學(xué)習(xí)表單輸入綁定時(shí)，我們看到 v-model 有內(nèi)置修飾符——.trim、.number 和 .lazy。但是，在某些情況下，你可能還需要添加自己的自定義修飾符。

讓我們創(chuàng)建一個(gè)示例自定義修飾符 capitalize，它將 v-model 綁定提供的字符串的第一個(gè)字母大寫(xiě)。

添加到組件 v-model 的修飾符將通過(guò) modelModifiers prop 提供給組件。在下面的示例中，我們創(chuàng)建了一個(gè)組件，其中包含默認(rèn)為空對(duì)象的 modelModifiers prop。

請(qǐng)注意，當(dāng)組件的 created 生命周期鉤子觸發(fā)時(shí)，modelModifiers prop 包含 capitalize，其值為 true——因?yàn)樗辉O(shè)置在 v-model 綁定 v-model.capitalize="bar"。

<my-component v-model.capitalize="bar"></my-component>

app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  template: `
    <input type="text" 
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)">
  `,
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
})

現(xiàn)在我們已經(jīng)設(shè)置了 prop，我們可以檢查 modelModifiers 對(duì)象鍵并編寫(xiě)一個(gè)處理器來(lái)更改發(fā)出的值。在下面的代碼中，每當(dāng) <input/> 元素觸發(fā) input 事件時(shí)，我們都將字符串大寫(xiě)。

<div id="app">
  <my-component v-model.capitalize="myText"></my-component>
  {{ myText }}
</div>

const app = Vue.createApp({
  data() {
    return {
      myText: ''
    }
  }
})


app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  },
  template: `<input
    type="text"
    :value="modelValue"
    @input="emitValue">`
})


app.mount('#app')

對(duì)于帶參數(shù)的 v-model 綁定，生成的 prop 名稱(chēng)將為 arg + "Modifiers"：

<my-component v-model:foo.capitalize="bar"></my-component>

app.component('my-component', {
  props: ['foo', 'fooModifiers'],
  template: `
    <input type="text" 
      :value="foo"
      @input="$emit('update:foo', $event.target.value)">
  `,
  created() {
    console.log(this.fooModifiers) // { capitalize: true }
  }
})