vue插槽的模板与JSX写法

1export default {
2    data() {
3        return {
4            info: {
5                title: "title No.01"
6            },
7            info2: {
8                title: "title No.02"
9            }
10        };
11    },
12    render() {
13        return (
14            <div>
15                {this.$scopedSlots.default({
16                    info: this.info
17                })}
18
19                {this.$scopedSlots.other({
20                    info: this.info2
21                })}
22            </div>
23        );
24    }
25};
26

1
2<child
3    scopedSlots={{
4        default: props => {
5            return (
6                <div style="line-height: 30px;">
7                    {props.info.title}
8                </div>
9            );
10        },
11        other: props => {
12            return (
13                <div style="line-height: 30px;">
14                    {props.info.title}
15                </div>
16            );
17        }
18    }}
19/>

1<template>
2    <div>
3        <!-- 默认插槽 -->
4        <slot :info="info"></slot>
5        <!-- other插槽 -->
6        <slot name="other" :info="info2"></slot>
7    </div>
8</template>
9
10<script>
11export default {
12    data() {
13        return {
14            info: {
15                title: "标题一"
16            },
17            info2: {
18                title: "标题二"
19            }
20        };
21    }
22};
23</script>

1<child>
2    <template v-slot:default="slotProps">
3        <div>
4            {{ slotProps.info.title }}
5        </div>
6    </template>
7    <template v-slot:other="slotProps">
8        <div>
9            {{ slotProps.info.title }}
10        </div>
11    </template>
12</child>