在绝大多数情况下，Vue 推荐使用模板语法来创建应用。然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。
如果你还不熟悉虚拟 DOM 和渲染函数的概念的话，请确保先阅读渲染机制章节。
要书写JSX的话需要安装 @vitejs/plugin-vue-jsx 包。
//vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx'
export default {
plugins: [
vueJsx({
// options are passed on to @vue/babel-plugin-jsx
}),
],
}配置完成后新建一个 .jsx 文件就可以开始书写了。
但是呢，Vue 推荐使用模板语法来创建应用，我们为什么用JSX呢！
我们这个业务需要点击一个按钮，然后查看详情出现一个弹窗，这个弹窗会出现详情列表。
如果用模板语法的话，需要定义一个是否显示弹窗的变量，点击这个按钮之后，要根据数据ID请求相应的数据详情，并将数据赋值给一个变量，显示弹窗的变量赋值为True ，将请求回来的数据传入弹窗组件中再由组件v-for展示出来。
如果用JSX呢。
只需要创建一个JSX文件：
import { defineComponent, ref } from "vue";
import { ElDialog, ElTable, ElTableColumn, ElButton } from "element-plus";
//编辑涉及主播弹窗
export default defineComponent({
name: "EditingInvolvesAnchors",
props: {
onClose: {
type: Function,
default: () => {},
},
},
setup(props) {
const dialogVisible = ref(true);
const handleClose = (done) => {
done();
props.onClose();
};
const tableData = [
{
date: "2016-05-03",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-02",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-04",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-01",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
];
const tableColumns = [
{ prop: "date", label: "利润名称" },
{ prop: "name", label: "金额" },
{ prop: "address", label: "日期" },
{ prop: "address", label: "状态" },
{ prop: "operation", label: "操作" },
];
return () => (
<ElDialog
modelValue={dialogVisible.value}
onUpdate:modelValue={(val) => (dialogVisible.value = val)}
title="涉及主播"
width="1000px"
beforeClose={handleClose}
>
<ElTable data={tableData}>
{tableColumns.map(({ prop, label }) => {
return (
<ElTableColumn prop={prop} label={label}>
{{
default: (scope) => {
if (prop === "operation") {
return <ElButton type="danger">删除</ElButton>;
}
return scope.row[prop];
},
}}
</ElTableColumn>
);
})}
</ElTable>
</ElDialog>
);
},
});
然后在点击事件里面传入 数据ID，并且渲染这个弹窗
import EditingInvolvesAnchorsComponent from "./editingInvolvesAnchors.jsx";
const vnode = h(EditingInvolvesAnchorsComponent, {
content: "id",
onClose: () => {
setTimeout(() => {
render(null, container);
container.remove();
}, 500);
},
});
render(vnode, container);
document.body.appendChild(container);这样，在父组件内不用定义多余的变量，直接用js就可以操作弹窗了。 简洁！
以上，完结，撒花~