在Vue 3中,子組件可以將其方法拋出給父組件以便進(jìn)行父子組件之間的通信。這種方式在組件間傳遞數(shù)據(jù)非常方便,同時(shí)也避免了使用全局事件來(lái)實(shí)現(xiàn)組件通信的問(wèn)題。
子組件的方法拋出可以通過(guò)emits
選項(xiàng)來(lái)實(shí)現(xiàn)。具體來(lái)說(shuō),我們可以在子組件定義中聲明一個(gè)emits
選項(xiàng),指定該組件可以拋出的事件名稱(chēng)列表。例如:
const ChildComponent = {
emits: ['update:name'],
data() {
return {
name: 'Tom'
}
},
methods: {
updateName() {
this.$emit('update:name', this.name)
}
}
}
這里我們定義了一個(gè)ChildComponent
組件,聲明了一個(gè)emits
選項(xiàng),其中包括了update:name
事件。同時(shí),我們定義了updateName
方法來(lái)觸發(fā)該事件,并傳遞當(dāng)前組件的name
數(shù)據(jù)。
父組件可以在模板中通過(guò)監(jiān)聽(tīng)子組件拋出的事件來(lái)獲取該事件中傳遞的數(shù)據(jù),并進(jìn)行相應(yīng)的操作。例如:
const ParentComponent = {
components: {
ChildComponent
},
data() {
return {
name: ''
}
},
template: `
<div>
<child-component @update:name="updateName"></child-component>
<p>Name: {{ name }}</p>
</div>
`,
methods: {
updateName(newName) {
this.name = newName
}
}
}
這里我們?cè)?code>ParentComponent中注冊(cè)了ChildComponent
組件,并在模板中綁定了update:name
事件。同時(shí),我們定義了updateName
方法來(lái)獲取子組件傳遞的數(shù)據(jù),并將其賦值給name
變量。
通過(guò)這種方式,我們可以在子組件中定義一些方法用于處理組件內(nèi)的邏輯,同時(shí)將處理過(guò)的數(shù)據(jù)以事件形式拋出,讓父組件進(jìn)行相應(yīng)的操作,從而實(shí)現(xiàn)子組件和父組件之間的交互。