Vue 插槽 父组件向子组件 传html结构

一、作用

父组件可以向子组件指定位置插入html结构，也是一种通信方式，适用于 父组件=>子组件

二、分类

默认插槽、具名插槽(有具体名字的插槽)、作用域插槽

三、使用方式

1、默认插槽

父组件

<Category title="美食" >
    <ul> 
        <li v-for="data,index in foods" :key="index"> {{data}}</li>
    </ul>
</Category>

子组件 Category.vue文件中

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义默认插槽，用来接收父组件传递的html结构 -->
        <slot>插槽默认内容</slot>
    </div>
</template>

2、具名插槽

场景：父组件向子组件插入多个html结构，需要具名插槽

子组件：命名插槽，关键字name

父组件：使用插槽，slot=子组件的插槽名，最好用<template></template>包裹，不影响结构

-----------

父组件

<!-- 父组件 -->
<template   slot="center">
    <ul> 
        <li v-for="data,index in foods" :key="index"> {{data}}</li>
    </ul>
</template>

<template slot="footer">
    <a href="https://www.baidu.com">百度一下</a>
</template>

子组件

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义默认插槽，用来接收父组件传递的html结构 -->
        <slot name="center">插槽默认内容ul li</slot>
        <slot name="footer">插槽内容 a 标签</slot>
    </div>
</template>

3、作用域插槽

场景：父组件向子组件传递html结构，html结构需要使用数据，但是数据在子组件里，需要使用作用域插槽实现

子组件在slot中 动态绑定值 :test="test"

父组件想要插入的html 外包的 <template scop="xx"></template>,xx是定义的值，获取值需要通过xx.test 或 scop="{test}"

父组件

<Category title="美食" >
    <!-- 父组件 -->
    <!-- 接收值第一种方法 -->
    <template scope="abc">
        <ul> 
            <li v-for="data,index in abc.foods" :key="index"> {{data}}</li>
        </ul>
    </template>

</Category>

<Category title="美食" >
    <!-- 父组件 -->
    <!-- 接收值第二种方法-->
    <template scope="{foods}">
        <ul> 
            <li v-for="data,index in foods" :key="index"> {{data}}</li>
        </ul>
    </template>
</Category>

子组件

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义默认插槽，用来接收父组件传递的html结构 -->
        <slot :foods="foods">插槽默认内容ul li</slot>
    </div>
</template>