vue插槽的模板与JSX写法

2021-10-08 Vue

插槽传值JSX写法

child component:

export default {
    data() {
        return {
            info: {
                title: "title No.01"
            },
            info2: {
                title: "title No.02"
            }
        };
    },
    render() {
        return (
            <div>
                {this.$scopedSlots.default({
                    info: this.info
                })}

                {this.$scopedSlots.other({
                    info: this.info2
                })}
            </div>
        );
    }
};


export default {
    data() {
        return {
            info: {
                title: "title No.01"
            },
            info2: {
                title: "title No.02"
            }
        };
    },
    render() {
        return (
            <div>
                {this.$scopedSlots.default({
                    info: this.info
                })}

                {this.$scopedSlots.other({
                    info: this.info2
                })}
            </div>
        );
    }
};

parent component


<child
    scopedSlots={{
        default: props => {
            return (
                <div style="line-height: 30px;">
                    {props.info.title}
                </div>
            );
        },
        other: props => {
            return (
                <div style="line-height: 30px;">
                    {props.info.title}
                </div>
            );
        }
    }}
/>


<child
    scopedSlots={{
        default: props => {
            return (
                <div style="line-height: 30px;">
                    {props.info.title}
                </div>
            );
        },
        other: props => {
            return (
                <div style="line-height: 30px;">
                    {props.info.title}
                </div>
            );
        }
    }}
/>

插槽模板传值

child component:

<template>
    <div>
        <!-- 默认插槽 -->
        <slot :info="info"></slot>
        <!-- other插槽 -->
        <slot name="other" :info="info2"></slot>
    </div>
</template>

<script>
export default {
    data() {
        return {
            info: {
                title: "标题一"
            },
            info2: {
                title: "标题二"
            }
        };
    }
};
</script>

<template>
    <div>
        <!-- 默认插槽 -->
        <slot :info="info"></slot>
        <!-- other插槽 -->
        <slot name="other" :info="info2"></slot>
    </div>
</template>

<script>
export default {
    data() {
        return {
            info: {
                title: "标题一"
            },
            info2: {
                title: "标题二"
            }
        };
    }
};
</script>

parent component:

<child>
    <template v-slot:default="slotProps">
        <div>
            {{ slotProps.info.title }}
        </div>
    </template>
    <template v-slot:other="slotProps">
        <div>
            {{ slotProps.info.title }}
        </div>
    </template>
</child>

<child>
    <template v-slot:default="slotProps">
        <div>
            {{ slotProps.info.title }}
        </div>
    </template>
    <template v-slot:other="slotProps">
        <div>
            {{ slotProps.info.title }}
        </div>
    </template>
</child>

版权属于: vincent

本文链接:

转载时须注明出处及本声明

Tags:# vue2
···