vue3&JSX 插槽使用指南

这篇文章是关于近期【监测用物联网提升智能传感器和系统软件开发】项目中，我在其中摸鱼凑数日子里积攒下来的系列文章二：vue3&JSX 插槽使用指南， 记录在jsx和一般情况下 声明插槽、使用插槽、插槽传值 的笔记。

技术栈: vue3.x+TS(X)+Arco Design

一般插槽声明与使用

声明插槽与传值

// 子组件：detailModel
<div>
      <slot :state="{a: 1}">default</slot>
      <slot :list="[1,2,3]">list</slot>
  </div>

使用插槽

<detailModel>
    <template #default = {state}>
        default {{state}}
     </template>
     <template #list={list}>
        list {{list}}
     </template>
</detailModel>

jsx插槽 【传值】声明与使用

声明插槽与传值

// 子组件：detailModel
<script lang="tsx">
import {defineComponent, reactive} from "vue";
    export default defineComponent({
        setup(props, context) {
            const state = reactive({a: 1})
            const list = reactive([1,2,3])
            
            return () => (
                <a-modal visible={true}>
                    // 声明默认插槽 并传值，不传值为context.slots.default()
                    <div>{context.slots.default && context.slots.default({state: state})}</div>
                    // 声明名称为list的插槽 并传值，不传值为context.slots.list()
                    <div>{context.slots.list && context.slots.list({list: list})}</div>
                </a-modal>
            )
        }
    })
</script>

jsx使用插槽

// 父组件调用detailModel子组件
<script lang="tsx">
import {defineComponent, reactive} from "vue";
    export default defineComponent({
        setup() {
            const modalData = reactive({
                detailVisible: true
            })
            
            // 使用插槽
            const slots = {
                default: (state) => (
                    console.log(state)
                ),
                list: (list) => (
                    console.log(list)
                )
            }
            return () => (
            <>
                // 引用组件， 使用插槽：v-slots={slots}
                {modalData.detailVisible && <detailModel v-slots={slots}/>}
            </>
        );
        }
    })
</script>