建站
咨詢
售后
建站咨詢
新聞中心
該頁面假設(shè)你已經(jīng)閱讀過了組件基礎(chǔ)。如果你還對組件不太了解，推薦你先閱讀它。
網(wǎng)站的建設(shè)創(chuàng)新互聯(lián)專注網(wǎng)站定制,經(jīng)驗豐富,不做模板,主營網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁面制作!給你煥然一新的設(shè)計體驗!已為混凝土泵車等企業(yè)提供專業(yè)服務(wù)。
#事件名
不同于組件和 prop，事件名不存在任何自動化的大小寫轉(zhuǎn)換。而是觸發(fā)的事件名需要完全匹配監(jiān)聽這個事件所用的名稱。舉個例子，如果觸發(fā)一個 camelCase 名字的事件：
this.$emit('myEvent')則監(jiān)聽這個名字的 kebab-case 版本是不會有任何效果的：
不同于組件和 prop，事件名不會被用作一個 JavaScript 變量名或 property 名，所以就沒有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件監(jiān)聽器在 DOM 模板中會被自動轉(zhuǎn)換為全小寫 (因為 HTML 是大小寫不敏感的)，所以 @myEvent 將會變成 @myevent——導(dǎo)致 myEvent 不可能被監(jiān)聽到。
因此，我們推薦你始終使用 kebab-case 的事件名。
#定義自定義事件
在 Vue School 上觀看關(guān)于定義自定義事件的免費視頻。
可以通過 emits 選項在組件上定義已發(fā)出的事件。
app.component('custom-form', {
emits: ['in-focus', 'submit']
}) 當(dāng)在 emits 選項中定義了原生事件 (如 click) 時，將使用組件中的事件替代原生事件偵聽器。
TIP
建議定義所有發(fā)出的事件，以便更好地記錄組件應(yīng)該如何工作。
#驗證拋出的事件
與 prop 類型驗證類似，如果使用對象語法而不是數(shù)組語法定義發(fā)出的事件，則可以驗證它。
要添加驗證，將為事件分配一個函數(shù)，該函數(shù)接收傳遞給 $emit 調(diào)用的參數(shù)，并返回一個布爾值以指示事件是否有效。
app.component('custom-form', {
emits: {
// 沒有驗證
click: null,
// 驗證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 作為事件。我們可以通過向 v-model 傳遞參數(shù)來修改這些名稱：
在本例中，子組件將需要一個 foo prop 并發(fā)出 update:foo 要同步的事件：
const app = Vue.createApp({})
app.component('my-component', {
props: {
foo: String
},
template: `
`
})#多個 v-model 綁定
通過利用以特定 prop 和事件為目標(biāo)的能力，正如我們之前在 v-model 參數(shù)中所學(xué)的那樣，我們現(xiàn)在可以在單個組件實例上創(chuàng)建多個 v-model 綁定。
每個 v-model 將同步到不同的 prop，而不需要在組件中添加額外的選項：
const app = Vue.createApp({})
app.component('user-name', {
props: {
firstName: String,
lastName: String
},
template: `
`
})點擊此處實現(xiàn)
#處理 v-model 修飾符
在 2.x 中，我們對組件 v-model 上的 .trim 等修飾符提供了硬編碼支持。但是，如果組件可以支持自定義修飾符，則會更有用。在 3.x 中，添加到組件 v-model 的修飾符將通過 modelModifiers prop 提供給組件：
當(dāng)我們學(xué)習(xí)表單輸入綁定時，我們看到 v-model 有內(nèi)置修飾符——.trim、.number 和 .lazy。但是，在某些情況下，你可能還需要添加自己的自定義修飾符。
讓我們創(chuàng)建一個示例自定義修飾符 capitalize，它將 v-model 綁定提供的字符串的第一個字母大寫。
添加到組件 v-model 的修飾符將通過 modelModifiers prop 提供給組件。在下面的示例中，我們創(chuàng)建了一個組件，其中包含默認(rèn)為空對象的 modelModifiers prop。
請注意，當(dāng)組件的 created 生命周期鉤子觸發(fā)時，modelModifiers prop 包含 capitalize，其值為 true——因為它被設(shè)置在 v-model 綁定 v-model.capitalize="bar"。
app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
template: `
`,
created() {
console.log(this.modelModifiers) // { capitalize: true }
}
}) 現(xiàn)在我們已經(jīng)設(shè)置了 prop，我們可以檢查 modelModifiers 對象鍵并編寫一個處理器來更改發(fā)出的值。在下面的代碼中，每當(dāng) 元素觸發(fā) input 事件時，我們都將字符串大寫。
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: ``
})
app.mount('#app') 對于帶參數(shù)的 v-model 綁定，生成的 prop 名稱將為 arg + "Modifiers"：
app.component('my-component', {
props: ['foo', 'fooModifiers'],
template: `
`,
created() {
console.log(this.fooModifiers) // { capitalize: true }
}
})當(dāng)前標(biāo)題：創(chuàng)新互聯(lián)VUE3教程：Vue3.0自定義事件
鏈接分享：http://www.dlmjj.cn/article/dppehjj.html
