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>
然后就可以了!!简单的记一下避免忘记,须后用到更深入再补充