vue3 emits事件使用示例详解
作者:CUI_PING
这篇文章主要为大家介绍了vue3 emits事件使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
使用说明
emits: 列表声明从父组件继承来的事件
$emit: 抛出事件, 通知父组件处理
在子组件中,通过$emit()来触发事件
在父组件中,通过v-on来监听子组件事件
子组件中
export default { name: "MyXgPlayer", //声明从父组件继承来的事件:可以是简单数组, 也可以是对象(加了校验函数) emits: ['just-one-player'], props:{ domId: String, previewVideoUrl: String, }, setup(props, context){ //获取当前实例(包括从父组件传过来的props数据, 实例方法($watch,$emit, $forceUpdate,$nextTick, 定义的全局的$addHost // vue 内含的$alert,$message,$messageBox, $store,$router, $refs ...)) const {proxy} = getCurrentInstance() let player = ref(null) onMounted(()=>{ //new 数据 player.value = new Player ({ id: props.domId, url: props.previewVideoUrl, }); //监听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事件使用示例详解的详细内容,更多关于vue3 emits事件的资料请关注脚本之家其它相关文章!