一、背景介绍,render之前有简单在项目使用,但是我一直比较忙,没有系统研究,导致如果我要render方法写一个复杂组件还是有些困难,所以计划深入学习。先从一个极简demo开始,新手直接在项目里边复制代码就能看到效果,体验一下。
<template>
<div class="render">
<!-- 使用render后template里边内容不能展示,template区域可以删除掉 -->
<div>template</div>
</div>
</template>
<script lang="ts">
import { defineComponent, h, } from "vue";
export default defineComponent({
setup() {
let name: ''
return () => {
return h(
"div", // 标签,只写标签名,不写<>
{ // 属性
ref: 'test-render-ref',
class: 'test-render-class',
// innerHTML: 'test-render-html' // 这里打开后子元素里边innerHTML内容不能展示
},
[ // 子元素
h("p",{
class: 'test-render-class-child',
innerHTML: 'test-render-html-child'
})
]
);
};
}
})
</script>
效果:
二、欢迎交流指正
三、参考链接: