vue3?emits事件使用示例詳解
更新時間:2023年07月03日 11:27:09 作者:CUI_PING
這篇文章主要為大家介紹了vue3?emits事件使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
使用說明
emits: 列表聲明從父組件繼承來的事件
$emit: 拋出事件, 通知父組件處理
在子組件中,通過$emit()來觸發(fā)事件
在父組件中,通過v-on來監(jiān)聽子組件事件
子組件中
export default {
name: "MyXgPlayer",
//聲明從父組件繼承來的事件:可以是簡單數(shù)組, 也可以是對象(加了校驗函數(shù))
emits: ['just-one-player'],
props:{
domId: String,
previewVideoUrl: String,
},
setup(props, context){
//獲取當前實例(包括從父組件傳過來的props數(shù)據(jù), 實例方法($watch,$emit, $forceUpdate,$nextTick, 定義的全局的$addHost
// vue 內(nèi)含的$alert,$message,$messageBox, $store,$router, $refs ...))
const {proxy} = getCurrentInstance()
let player = ref(null)
onMounted(()=>{
//new 數(shù)據(jù)
player.value = new Player ({
id: props.domId,
url: props.previewVideoUrl,
});
//監(jiān)聽play 事件
player.value.on('play', ()=>{
console.log("start $emit")
//給父組件拋事件
proxy.$emit("just-one-player", props.domId, player)
})
})
},
}父組件中
<my-xg-player
:dom-id="'xgplayer_test_'+file.collection_id"
:preview-video-url="file.file_path"
@justOnePlayer="justOnePlayer"
/><!--script中-->
import {ref} from "vue"
setup(props, context){
const xgplayers = ref({})
const justOnePlayer = (domId, player)=>{
console.log("receive $emit")
for(let item_key in state.xgplayers){
if(item_key !== domId){
state.xgplayers[item_key].pause()
}
}
state.xgplayers[domId] = player
}
return {
xgplayers,
justOnePlayer
}
}
}點擊子組件中的播放,打印的log
start $emit
receive $emit
以上就是vue3 emits事件使用示例詳解的詳細內(nèi)容,更多關(guān)于vue3 emits事件的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
詳解Vue實戰(zhàn)指南之依賴注入(provide/inject)
這篇文章主要介紹了詳解Vue實戰(zhàn)指南之依賴注入(provide/inject),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue實現(xiàn)給某個數(shù)據(jù)字段添加顏色
這篇文章主要介紹了vue實現(xiàn)給某個數(shù)據(jù)字段添加顏色方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實現(xiàn)input文本框只能輸入0-99的正整數(shù)問題
這篇文章主要介紹了vue實現(xiàn)input文本框只能輸入0-99的正整數(shù)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10

