在 vue3 中优雅的使用 jsx 声明、使用具名插槽、作用域插槽

最近手撸 vue3，出于好奇打算玩一手 JSX，在声明和使用插槽时遇到了一些挫折。
由于 JSX 语法不太熟，就拿 element-plus 的 menu 组件来举个例子、

template 写法

<el-menu router active-text-color="#ffd04b" background-color="#545c64">
 <el-sub-menu v-for="route in asyncRoutes" :key="route.name" :index="route.path">
  <template #title>
   {{ route.meta.title }}
  template>
  <el-menu-item>{{ route.meta.title }}el-menu-item>
 el-sub-menu>
el-menu>

jsx 写法

render() {
    if (!this.route.hide) {
      if (this.route?.children?.length > 0) {
        return (
          <>
            <el-sub-menu
              index={this.route.path}
              v-slots={{ title: () => <span>{this.route.meta.title}</span> }}
            >
              {this.route.children.map((item: AppRouteModule) => {
                return (
                  <el-menu-item index={item.path}>
                    {item.meta.title}
                  </el-menu-item>
                );
              })}
            </el-sub-menu>
          </>
        );
      }
    }
  },

以上是如何使用具名插槽，如果是作用域插槽在 v-slots 中的回调中可携带入参 scope
下面会结合 JSX 声明的语法来演示作用域插槽，普通语法就不多赘述了。

JSX 声明具名插槽（不带参）、作用域插槽（带参）

setup() {
 return {
 	value: {
		msg: '这是子组件的插槽内容'
	}
 }
},
render() {
	return (
		<>
			<p>这是子组件</p>
			{ this.$slots.content?.(this.value) }
		</>
	)
}

基于 vue3 的微信公众号 H5 项目