幫別人起名 做ppt的網(wǎng)站做百度推廣怎么做才能有電話
目錄
前言
一、基本語法
1. 子組件觸發(fā)
2. 父組件監(jiān)聽
二、?事件參數(shù)
1. 傳值
2. 接收值
三、?事件校驗
四、注意事項
前言
組件事件是 Vue 組件之間進行通信的一種方式。它允許一個組件觸發(fā)一個自定義事件,并且其他組件可以監(jiān)聽并響應這個事件。
一、基本語法
1. 子組件觸發(fā)
子組件觸發(fā)自定義的事件有兩種方式。
- 模板表達式中
在組件的模板表達式中,可以直接使用?$emit
?方法觸發(fā)自定義事件,例如:
<!-- SonCom -->
<button @click="$emit('someEvent')">click me</button>
- <script setup> 里
顯式地通過?defineEmits()?宏來聲明它要觸發(fā)的事件。注意,defineEmits只等在<script setup>
?的頂級作用域下使用,不能在別的函數(shù)里。
科普一下:在計算機編程中,宏(Macro)通常是一種預處理指令或代碼片段,用于在編譯過程之前進行文本替換和代碼生成。宏可以幫助簡化代碼編寫、提高代碼的復用性和可維護性。
然后使用defineEmits()
?返回的跟模板里面的 $emit 相同作用的函數(shù)來觸發(fā)。
<script setup>
// 聲明
const emit = defineEmits(['touchFather', 'submitFather'])// 觸發(fā)
function buttonClick() {emit('touchFather')
}
</script>
- 非 <script setup> 里
事件需要通過 emits 選項來定義,emit
?函數(shù)也被暴露在?setup()
?的上下文對象上。
export default {emits: ['inFocus', 'submit'],setup(props, ctx) {ctx.emit('submit')}
}
2. 父組件監(jiān)聽
和Vue2一樣,父組件可以通過?v-on
?(縮寫為?@
) 來監(jiān)聽事件:
<SonCom @some-event="callback" />
ps:事件名可以用駝峰形式,但是在模板中是推薦使用kebab-case 形式來編寫。
二、?事件參數(shù)
如果我們需要再觸發(fā)事件的時候給父組件傳特定的值,就可以提供給 $emit 額外的參數(shù)。
1. 傳值
- 模板里傳值
<button @click="$emit('chooseA', 1)">chooseA
</button>
- script里傳值
<script setup>
// 聲明
const emit = defineEmits(['touchFather', 'submitFather'])// 觸發(fā)并傳值
function buttonClick() {emit('touchFather', num)
}
</script>
所有傳入?
$emit()
?或?emit()
的額外參數(shù)都會傳過去,傳參不限制個數(shù)。
2. 接收值
- 模板里接收值
<SonCom @touch-father="(num) => count = num" />
- 方法里接收值
<SonCom @touch-father="handleNum" /><script>function handleNum(num) {count.value += num}
</script>
三、?事件校驗
事件也可以像Props一樣來進行校驗。只需要將上面的數(shù)組換成對象。對象里事件被賦值為一個函數(shù)。接受的參數(shù)就是拋出事件時傳入?emit
?的內(nèi)容,返回一個布爾值來表明事件是否合法。
<script setup>
const emit = defineEmits({// 沒有校驗touchFather: null,// 校驗 submitFather 事件submitFather: ({ email, password }) => {if (email && password) {return true} else {console.warn('Invalid submit event payload!')return false}}
})function submitForm(email, password) {emit('submitFather', { email, password })
}
</script>
示例:
子組件:校驗并且傳參不符合校驗規(guī)則
<template><div><button @click="submitForm">子傳父</button></div>
</template><script setup>const obj = {email: '',password: ''}const emit = defineEmits({// 沒有校驗touchFather: null,// 校驗 submitFather 事件submitFather: ({ email, password }) => {if (email && password) {return true}console.log('傳參無效!')return false}})function submitForm() {emit('submitFather', obj)}
</script>
父組件:
<template><div><ChildComponent @submit-father="handle" /></div>
</template><script setup>import ChildComponent from './ChildComponent.vue'function handle({ email, password }) {console.log('父組件——', email, password)}
</script>
運行結果:
傳參失敗,并且Vue報錯。
如果給obj值通過校驗:
<template><div><button @click="submitForm">子傳父</button></div>
</template><script setup>const obj = {email: 123,password: 123}const emit = defineEmits({// 沒有校驗touchFather: null,// 校驗 submitFather 事件submitFather: ({ email, password }) => {if (email && password) {return true}console.log('傳參無效!')return false}})function submitForm() {emit('submitFather', obj)}
</script>
結果:
四、注意事項
1.?組件觸發(fā)的事件沒有冒泡機制。
2.?如果一個原生事件的名字 (例如?click
) 被定義在?emits
?選項中,則監(jiān)聽器只會監(jiān)聽組件觸發(fā)的?click
?事件而不會再響應原生的?click
?事件。