背景

做个记录，有时候不常用，就可能会遗忘

普通、具名插槽

父组件

export default defineComponent({
    setup(props, { emit, slots }) {
        return () => {
            const slots = {
                "input": () => (
                  <RadioGroup v-model={checked.value} direction="horizontal">
                    这是具名插槽
                  </RadioGroup>
                ),
                "default": () => (
                    <>这是默认插槽</>
                 )
             };
             const innerContent = (
                <div className={face_content}>
                  <Field name="radio" label="单选" v-slots={slots}></Field>
                </div>
             );
             return (
                 <div
                      className={`popup_content`}
                      onClick={withModifiers(closeOnly, ["self"])}
                  >
                    {innerContent}
                 </div>
             )
        }
    }
})

子组件

export default defineComponent({
    name: "Field",
    render() {
        return (
            <>
                <span>xxxx</span>
                { this.$slots.default() }
                { this.$slots.header() }
            </>
        )
    }
})

作用域插槽

子组件

export default defineComponent({
    name: "Field",
    setup() {
        return {
            value: {
                name: 'xzw'
            }
        }
    },
    render() {
        return (
            <>
                <span>学习学习</span>
                { this.$slots.content(this.value) }
            </>
        )
    }
})

父组件

export default defineComponent({
    setup(props, { emit, slots }) {
        return () => {
            const slots = {
                "content": (scope) => (
                  <RadioGroup v-model={checked.value} direction="horizontal">
                    {scope.name}
                  </RadioGroup>
                ),
               
             };
             const innerContent = (
                <div className={face_content}>
                  <Field name="radio" label="单选" v-slots={slots}></Field>
                </div>
             );
             return (
                 <div
                      className={`popup_content`}
                      onClick={withModifiers(closeOnly, ["self"])}
                  >
                    {innerContent}
                 </div>
             )
        }
    }
})