在Vue3.0+ts中如何使用h函式

我要做的是一個選單效果，是用的jsx語法，開發使用的是Vue3.0+ts開發的

直接用模板編寫

<a-menu v-model:selectedKeys="selectedKeys" mode="inline" theme="light">
    <a-menu-item key="1">
        <pie-chart-outlined/>
            <span>工作臺</span>
    </a-menu-item>
    <a-sub-menu key="sub3">
        <template #title>
        <span>
        <desktop-outlined/>
            <span>系統配置</span>
        </span>
        </template>
        <a-sub-menu key="sub4" title="許可權管理">
            <a-menu-item key="7">
                選單列表
            </a-menu-item>
        </a-sub-menu>
    </a-sub-menu>
    <a-sub-menu key="sub2">
        <template #title>
            <span>
                <user-outlined/>
                <span>User</span>
            </span>
        </template>
        <a-menu-item key="4">Bill</a-menu-item>
    </a-sub-menu>
</a-menu>

使用tsx編寫

資料結構

const defaultMenu = [
    {
        name: '首頁',
        router: '/home',
        icon: 'HomeFilled',
        isShow: 1,
        id: 1
    },
    {
        name: '元件庫',
        router: '',
        isShow: 1,
        id: 2,
        children: [
            {
                name: 'Markdown編輯器',
                router: '/markdown',
                icon: 'HomeFilled',
                isShow: 1,
                id: 3,
            },
            {
                name: '檔案上傳',
                router: '/fileUpload',
                icon: 'UploadOutlined',
                isShow: 1,
                id: 4,
        children:[
                    {
                        name: '圖片上傳',
                        router: '/fileUploadImg',
                        icon: 'UploadOutlined',
                        isShow: 1,
                        id: 6,
                    }
                ]
            },
        ]
    },
    {
        name: '關於',
        router: '/about',
        icon: 'UserOutlined',
        isShow: 1,
        id: 5,
    },
]

import {computed, defineComponent, h, ref} from 'vue'
import {useStore} from 'vuex'


export default defineComponent({
    name: 'yxs-menu-slider',
    setup() {
        const store = useStore();

        const selectedKeys = ref<string[]>(['1']); // 設定預設選中
        const menuList = computed(() => store.getters.menuList); // 等於上述的 defaultMenu 結構，我只不過放在了store
        return {
            selectedKeys,
            menuList
        }
    },
    render(ctx: any) {
        const deepMenu = function (list: Array<any>) {
            let html = null;
            return list.filter((item: any) => item.isShow).map((item: any) => {
                if (item.children && item.children.length) {
                    html = h(
                        <a-sub-menu key={item.id}></a-sub-menu>,
                        {},
                        {
                            title: () => { // 插槽位置 title
                                return <span>{item.name}</span>
                            },
                            default: () => { // 預設內容
                                let children = item.children.map((todo: any) => {
                                    return <a-menu-item key={todo.id}>{todo.name}</a-menu-item>
                                })
                                return children && deepMenu(item.children) // 遞迴
                            }
                        }
                    )
                } else {
                    html = h(
                        <a-menu-item key={item.id}></a-menu-item>,
                        {},
                        {
                            default: () => {
                                return <span>{item.name}</span>
                            }
                        }
                    )
                }
                return html;
            })
        }
        const children = deepMenu(ctx.menuList);
        return (
            <div class="yxs-menu-slider">
                <a-menu
                    v-model:selectedKeys={ctx.selectedKeys}
                    mode="inline"
                    theme="light">
                    {children}
                </a-menu>
            </div>
        )
    }
})

使用

註冊呼叫即可

<template>
    <YxsMenuSlider/>
</template>
<script lang="ts">
    import YxsMenuSlider from './components/menu/index.tsx'

    export default defineComponent({
        name: 'Slider',
        components: {
            YxsMenuSlider
        }
    })
</script>

效果如下

上面半截是模板，下面tsx模板

擴充套件

你的元件可能有更多的插槽，寫上插槽名字即可

h(Comp, null, {
    default: () => 'default',
    foo: () => 'foo',
    bar: () => 'bar'
})

注意這麼寫的時候，即便沒有props，第二個引數也是必須的，因為h函式發現第二個引數如果是物件，那麼預設其就是props，

更多寫法請往下看，原始碼已經幫我做好了很多相容

講解

h語法

在講之前先看h函式原始碼

// type 元素的型別
// propsOrChildren 資料物件, 這裡主要表示(props, attrs, dom props, class 和 style)
// children 子節點也是一個any型別

export function h(type: any, propsOrChildren?: any, children?: any): VNode {
  if (arguments.length === 2) {
    if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
      // single vnode without props
      if (isVNode(propsOrChildren)) {
        return createVNode(type, null, [propsOrChildren])
      }
      // props without children
      return createVNode(type, propsOrChildren)
    } else {
      // omit props
      return createVNode(type, null, propsOrChildren)
    }
  } else {
    if (isVNode(children)) {
      children = [children]
    }
    return createVNode(type, propsOrChildren, children)
  }
}

通過上述我們就知道，如何使用h函式，以及為什麼能這麼傳參

h('div')

// type + props
h('div', {})

// type + omit props + children
// Omit props does NOT support named slots
h('div', []) // array
h('div', 'foo') // text
h('div', h('br')) // vnode
h(Component, () => {}) // default slot

// type + props + children
h('div', {}, []) // array
h('div', {}, 'foo') // text
h('div', {}, h('br')) // vnode
h(Component, {}, () => {}) // default slot
h(Component, {}, {}) // named slots

// named slots without props requires explicit `null` to avoid ambiguity
h(Component, null, {})

官方也說的有列子

更多關於你學習的知識

https://vue3js.cn/global/h.html
關於 vue3 中的 render 方法，你可能不知道這些