vue插槽入门

本文简单介绍一下vue中的插槽相关的知识点，包括插槽的概念，类型，和具体使用。内容比较简单，适合入门。

目录

插槽的类型

默认插槽的使用

默认插槽的使用案例

 具名插槽的使用

具名插槽使用-其一

 具名插槽使用-其二

 作用域插槽的使用

默认插槽中使用作用域插槽

具名插槽中使用作用域插槽 

---

插槽的类型

- 默认插槽 --- default

- 具名插槽 -- name

- 作用域插槽  -- v-slot

我们将根据这三种类型，进行讲解。

默认插槽的使用

在自定义组件中使用  <slot /> 标签进行占位，当我们使用这个组件的时候，在组件标签内写入需要展示的具体内容

使用组件的时候，这个组件内的插槽就会为内容先占个位置，相当于一个占位符。

如

{
    components: {
        'MyComponent': {
            template: ` <div> <slot /> </div> `
        }
    }
}
// 使用组件
<my-component>这个位置就是需要显示的数据 </my-component>

默认插槽的使用案例

先上代码

在dom结构中，我们直接去使用组件，这样组件内的插槽也就会被使用。插槽为组件的内容占了个位置。

如果在使用组件时候在双标签内写入了内容，就显示写入的内容，否则显示插槽内写入的默认的内容。

<div id="app">
        <!-- alert-box为组件名，此次是在使用组件 -->
        <!-- 如果组件中有内容就显示内容，否则就显示默认内容 -->
        <alert-box>
            <p>有BUG</p>
        </alert-box>
        <alert-box>有一个警告</alert-box>
        <!-- 此次没有写入信息，就会显示插槽内写的默认内容 -->
        <alert-box></alert-box>
    </div>

 默认插槽其实就是在组件注册的时候，在template里面写入了一个<slot></slot>,标签内写入了一个默认的内容。

 Vue.component('alert-box', {//注册这个组件
            //在template里面写入插槽<slot></slot>,并且写入默认内容，来为内容占位置
            template: `
            <div> 
            <strong>ERROR:</strong>    
            <slot>默认内容</slot>
            </div>
            `
        })
        let vm = new Vue({
            el: "#app",
            data: {

            }
        })

结果：

 具名插槽的使用

具名插槽就是给 <slot /> 标签加上 name属性

如

{
    components: {
        'MyComponent': {
            template: ` <div> <slot name="hello" /> </div> `
        }
    }
}
// 使用组件
<my-component>
	<template slot="hello"></template>    
</my-component>

具名插槽使用-其一

先上代码

如后h5代码所示，我们设置了头部，底部和主体内容。为了就是使用具体插槽去渲染不同的dom节点。

 <div id="app">
        <base-layout>
<!-- 这个p标签，插槽名字是header，那么根据组件内的template就在header双标签内渲染 -->
            <p slot="header">标题信息</p>
<!-- 没有被包裹在带有slot标签的内容都会被视为默认插槽的内容 -->
            <p>主题内容</p>
            <p>主题内容</p>
<!-- 同样的，这个插槽名字是footer，那么根据组件内的template就在footer双标签内渲染 -->
            <p slot="footer">底部信息</p>

        </base-layout>
</div>

// 声明组件
        Vue.component('base-layout', {
            //template中，我们分别给插槽<slot></slot>取名header和footer
            // 在main中的是没有名字的默认插槽
            //在使用这个组件渲染页面dom结构，页面的内容会根据插槽的名字来具体渲染结构
            template: `
            <div class="container"> 
                <header>
                    <slot name="header"></slot>
                </header>
                <main>
                    <slot></slot>    
                </main>
                <footer>
                    <slot name="footer"></slot>    
                </footer>
            </div>
            `
        })
        let vm = new Vue({
            el: "#app",
            data: {

            }
        })

结果

 具名插槽使用-其二

我们在template模板中使用一下具名插槽，就是在 <template> 元素上使用 slot 指令，把slot作为<template>的一个属性来用。

<div id="app">
        <!-- 模板中使用 -->
        <base-layout>
            <template slot="header">
                <p>标题信息</p>
                <p>标题信息</p>
            </template>
            <p slot="header">标题信息</p>

            <p>主题内容</p>
            <p>主题内容</p>


            <template slot="footer">
                <p>底部信息</p>
            </template>

        </base-layout>
    </div>

Vue.component('base-layout', {
            template: `
            <div class="container"> 
                <header>
                    <slot name="header"></slot>
                </header>
                <main>
                    <slot></slot>    
                </main>
                <footer>
                    <slot name="footer"></slot>    
                </footer>
            </div>
            `
        })
        let vm = new Vue({
            el: "#app",
            data: {

            }
        })

结果

 作用域插槽的使用

在父组件使用插槽时需要访问子组件中的数据，这个时候就需要使用作用域插槽

使用方法：

把data 变量名作为 <slot />元素的一个attribute（属性）绑定上去

<slot :自定义变量="需要传入的数据"></slot>
// 示例
<slot :count="count"></slot>

默认插槽中使用作用域插槽

代码如下

<div id="app">
        <my-list>
            <!-- default默认插槽 -->
            <!-- 使用v-slot 接收默认插槽的数据 并把数据命名为 slotProps  -->
            <!-- 第一种使用方式 -->
            <template v-slot:default="slotProps">
                我叫：{{slotProps.detail.name}}
                我的爱好是：{{slotProps.detail.love}}
            </template>
    
            <!-- 第二种使用方式 -->
            <!-- <template v-slot="slotProps">
                我叫：{{slotProps.detail.name}}
                我的爱好是：{{slotProps.detail.love}}
            </template> -->
        </my-list>
    </div>

Vue.component('myList', {
            template: `
            <div><slot :detail="detail"></slot></div>
            `,
            data: function () {
                return {
                    detail: {
                        name: '张三',
                        love: 'No coding'
                    }
                }
            }
        })
        let vm = new Vue({
            el: "#app",
            data: {

            }
        })

结果：

具名插槽中使用作用域插槽 

具名插槽必须在<slot /> 后面加上插槽的名，否则数据无法在具名插槽中使用

代码如下

<div id="app">
        <my-list>
            <template v-slot:detail="slotProps">
                我叫：{{slotProps.detail.name}}
                我的爱好是：{{slotProps.detail.love}}
            </template>
        </my-list>

    </div>

Vue.component('myList', {
            //在template内的slot里面，别忘了写这个插槽的名字
            template: `
            <div>
                <slot :detail="detail" name="detail"></slot>
            </div>
            `,
            data: function () {
                return {
                    detail: {
                        name: '张三',
                        love: 'No working'
                    }
                }
            }
        })
        let vm = new Vue({
            el: "#app",
            data: {

            }
        })

结果：