插件配置
@vitejs/plugin-vue-jsx
vite 中的 plugin 配置
import vueJsx from '@vitejs/plugin-vue-jsx';
plugin: [
vueJsx(),
]
h 函数
返回一个”虚拟节点“，通常缩写为 VNode：一个普通对象， 其中包含向 Vue 描述它应在页面上渲染哪种节点的信息，包括所有子节点的描述。它的目的是用于手动编写的渲染函数
type：类型：String|Object|FunctionHTML标签名、组件、异步组件或函数式组件。使用返回null的函数将渲染一个注释。此参数是必需的。props：类型：Object一个对象，与我们将在模板中使用的attribute、prop和事件相对应。可选。children：类型：String|Array|Object子代VNode，使用h()生成，或者使用字符串来获取“文本VNode”，或带有插槽的对象。可选。
使用示例
代码语言：javascript复制<script lang="tsx">
import Child from './child.vue';
import { defineComponent, h } from 'vue';
export default defineComponent({
setup() {
function handClick() {
alert(1);
}
return () =>
h('div', {}, [
'Some text comes first.',
h(
'h1',
{
class: 'scrollbar__thumb',
onClick: handClick,
style: {
fontSize: '30px',
color: 'blue',
},
},
'A headline',
),
h(Child, {
someProp: 'foobar',
}),
]);
},
});
</script>
<style scoped>
.scrollbar__thumb {
background: lightblue;
}
</style>
child 代码
<script lang="tsx">
import { defineComponent, h } from 'vue';
export default defineComponent({
setup() {
return () => h('div', { style: {color: '#eee'}},'这是子组件');
},
});
</script>
<style scoped>
</style>
tsx 写法
示例
代码语言：javascript复制<script lang="tsx">
import { defineComponent } from 'vue';
import Child from './child.vue'
export default defineComponent({
setup() {
return () => (
<div style="color: red" class="my-test">
111
<p>333</p>
<Child />
</div>
);
},
});
</script>
<style scoped>
.my-test {
background: lightblue;
}
</style>tsx-setup 写法
代码语言：javascript复制<script lang="tsx" setup>
import { render } from 'vue';
render(
<div ref="test" id="test1" style="text-align: center">
333
<p style="color: red">test</p>
</div>,
document.body,
);
</script>
<style scoped>
.my-test {
background: lightblue;
}
</style>
