vue插槽的使用心得

vue插槽的使用心得

匿名插槽

子组件

<template>
    <div>
        <slot></slot>
    </div>
</template>

父组件

<child>
    <template>
    </template>
</child>  
//直接在子组件内插入html

具名插槽

子组件

<template>
    <div>
        <slot name="left"></slot>
        <slot name="right"></slot>
    </div>
</template>
 

父组件

<child>
    <template slot="left">
    </template>

    <template slot="right">
    </template>
</child>  
//直接在插入的标签内的slot写具体插槽的名字

需要在插槽内部使用子组件的数据的插槽

子组件

<template>
    <div>
        <slot :data="value1"></slot>
    </div>
</template>



data() {

    value1: "需要传递的值"
    
}

父组件

<child>
    <template slot-scope="scope">
        {{scope.data}}   //需要传递的值
    </template>
</child>