vue3 slot 插槽在h函数中如何使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 slot 插槽在h函数中如何使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue3 h函数中如何使用插槽

前言

vue3已经出了有一段时间了，越来越多的小伙伴开始用vue3来写项目。开发过程中难免会用到h函数，有时候会使用h函数封装一些组件，封装组件又会用到插槽。所以呢对于在h函数中如何使用插槽稍作了整理，希望能帮到帮接触h函数的小伙伴。

这里只讲解插槽的用法，不涉及h函数如何使用，如需了解h函数用法，可查阅官网文档-渲染函数

什么是h函数

h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是 createVnode()，但当你需要多次使用渲染函数时，一个简短的名字会更省力。

使用插槽

插槽使用方式这里可分为两种，下面一一介绍。

第一种方式（使用slots.xxxxx?.()）

默认插槽

这里是一个子组件A.ts

import { h, defineComponent } from 'vue'
export default defineComponent({
    setup(_, { slots }) {
        return () => h('span', slots.default?.())
    }
})

具名插槽

这里是一个子组件B.ts

import { h, defineComponent } from 'vue'
export default defineComponent({
    setup(_, { slots }) {
        return () => h('span', slots.foo?.())
    }
})

这个foo就是具名插槽的名字

作用域插槽

这里是一个子组件C.ts

import { h, defineComponent } from 'vue'
export default defineComponent({
    setup(_, { slots }) {
        return () => h('span', slots.footer?.({ msg: '这是一条来自作用域插槽（C组件）传递的数据', list: ['a', 'b', 'c', 'd'] }))
    }
})

{ msg: '这是一条来自作用域插槽（C组件）传递的数据', list: ['a', 'b', 'c', 'd'] } 这个对象就是向外部传递的数据

在父组件中使用

这是父组件Content.ts

import { h, defineComponent } from 'vue'
import A from './A'
import B from './B'
import C from './C'
export default defineComponent({
    setup() {
        return () => h('div', [
            h(A, () => h('div', '我是默认插槽')),
          	// 注意 `null` 是必需的
						// 以避免 slot 对象被当成 prop 处理
            h(B, null, { foo: () => h('div', '我是具名插槽') }),
          	// 注意 `null` 是必需的
						// 以避免 slot 对象被当成 prop 处理
            h(C, null, {
                // 通过解构得到插槽作用域的参数
                footer: ({ msg, list }: { msg: string, list: string[] }) => [
                    h('h2', '我是作用域插槽'),
                    h('div', `msg: ${msg}`),
                    h('div', `list: 接收到了作用域插槽（C组件的List）---> ${list}`),
                ]
            }),
        ])
    }
})

vue3 slot 插槽在h函数中如何使用,vue3,javascript,前端,vue.js

第二种方式（使用renderSlot）