vue3中JSX结合h()函数的用法简记

vue3中JSX结合h()函数的用法简记

1、起因：为了实现表单设计通过左侧拖拽展示不同的组件、且这些组件内都渲染着一个公用的文本方法（删除和复制的功能）封装成一个组件CopyDelete，于是用到了如何通过h()函数将CopyDelete插入，且完成一些emit的操作功能

1.1CopyDelete组件内容

<template>
	<span title="复制" class="drawing-item-copy" @click="copyEvent">
		<SvgIcon name="ele-Document"></SvgIcon>
	</span>
	<span title="删除" class="drawing-item-delete" @click="deleteEvent">
		<SvgIcon name="ele-Delete"></SvgIcon>
	</span>
</template>
<script lang="ts" setup>
const emit = defineEmits(['copy', 'delete']);
const copyEvent = () => {
	emit('copy');
};
const deleteEvent = () => {
	emit('delete');
};
</script>

1.2 插槽copeDelete（coCopy） on很重要！！！

import CopyDeleteCom from './CopyDelete.vue';
const CopyDelete = () =>
	h(CopyDeleteCom, {
		onCopy() {
			console.log('2222执行了复制事件！！');
		},
		onDelete() {
			console.log('2222执行了删除事件！！');
			context.emit('deleteCurItem');
		},
	});

1.3插槽插入父组件中

return h(
		myInput,//引用的其他组件
		{
			...props,
		},
		{
			CopyDelete,//具名插槽 CopyDelete
		}
	);

然后再父组件myInput中留下这么一句

<slot name="CopyDelete"></slot>

然后就可以了！！简单的记一下避免忘记，须后用到更深入再补充