电商网站设计的企业百度平台商家客服

效果

用途

我想用是否注册事件，来控制组件中图标的显示与隐藏

实现

通过组件中判断是否注册了相应的函数，来判断

const checkEvent = () => {const instance = getCurrentInstance();console.log('instance?.vnode?.props:>', instance?.vnode?.props);const dragButtonClick = instance?.vnode?.props?.onDragButtonClick;if (dragButtonClick) {showDragButton.value = trueconsole.log('dragButtonClick 事件已注册');} else {console.log('dragButtonClick 事件未注册');}
}onMounted(() => {checkEvent()
})

原理

1. getCurrentInstance() 获取当前组件实例。
2. instance.vnode.props 存储了父组件传递的 所有 props，包括事件监听器。
3. Vue 会把 @dragButtonClick 事件转换成 onDragButtonClick 存入 props，所以我们检查 props.onDragButtonClick 即可。