建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
該頁(yè)面假設(shè)你已經(jīng)閱讀過(guò)了組件基礎(chǔ)。如果你還對(duì)組件不太了解，推薦你先閱讀它。
網(wǎng)站的建設(shè)創(chuàng)新互聯(lián)專(zhuān)注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營(yíng)網(wǎng)站定制開(kāi)發(fā).小程序定制開(kāi)發(fā),H5頁(yè)面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為混凝土泵車(chē)等企業(yè)提供專(zhuān)業(yè)服務(wù)。
#事件名
不同于組件和 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ì)有任何效果的：
不同于組件和 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)：
在本例中，子組件將需要一個(gè) foo prop 并發(fā)出 update:foo 要同步的事件：
const app = Vue.createApp({})
app.component('my-component', {
props: {
foo: String
},
template: `
`
})#多個(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)：
const app = Vue.createApp({})
app.component('user-name', {
props: {
firstName: String,
lastName: String
},
template: `
`
})點(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"。
app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
template: `
`,
created() {
console.log(this.modelModifiers) // { capitalize: true }
}
}) 現(xiàn)在我們已經(jīng)設(shè)置了 prop，我們可以檢查 modelModifiers 對(duì)象鍵并編寫(xiě)一個(gè)處理器來(lái)更改發(fā)出的值。在下面的代碼中，每當(dāng) 元素觸發(fā) input 事件時(shí)，我們都將字符串大寫(xiě)。
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') 對(duì)于帶參數(shù)的 v-model 綁定，生成的 prop 名稱(chēng)將為 arg + "Modifiers"：
app.component('my-component', {
props: ['foo', 'fooModifiers'],
template: `
`,
created() {
console.log(this.fooModifiers) // { capitalize: true }
}
})新聞名稱(chēng)：創(chuàng)新互聯(lián)VUE3教程：Vue3.0自定義事件
網(wǎng)頁(yè)URL：http://www.5511xx.com/article/dppehjj.html
