slot插槽基本用法

slot插槽可以让我们在父组件中，控制传递各种类型的内容到子组件，从而实现我们想要的内容展示。

# slot插槽基本用法

之前咱们都是使用组件的属性来传值，如果要想使用组件传递内容，可以使用<slot>实现，下面看一下代码示例：

 //自定义button组件
    let MyButton={
        template:`
                <button type="button"><slot></slot></button>
        `
    };
    new Vue({
        el:"#app",
        template:`
            <div>
                <my-button type="button">按钮</my-button>
                <my-button type="submit">提交</my-button>
            </div>
        `,
        components:{
            MyButton
        }
    })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# slot插槽后备内容

在组件内部使用<slot>元素是，可以给该元素指定一个内容当做默认值，代码如下：

    let MyButton={
        template:`
                <button type="button"><slot>按钮</slot></button>
        `
    };
    new Vue({
        el:"#app",
        template:`
            <div>
                <my-button type="button"></my-button>
                <my-button type="submit">提交</my-button>
            </div>
        `,
        components:{
            MyButton
        }
    })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 命名(具名)插槽

在实际开发中有时候会需要很多插槽，需要根据不同的内容对应不同的插槽来渲染，咱们来看一下下面的代码示例：

let BaseLayout={
        template:`
               <div>
                    <header>
                        <slot name="header"></slot>
                    </header>
                    <slot></slot>
                    <footer>
                        <slot name="footer"></slot>
                    </footer>
                </div>
        `
    };
new Vue({
        el:"#app",
        template:`
            <div>
                <base-layout>
                    <template v-slot:header>
                        <h1>我是页头</h1>
                    </template>
                    <div class="main">我是主体内容</div>
                    <template v-slot:footer>
                        <p>我是页脚</p>
                    </template>
                </base-layout>
            </div>
        `,
        components:{
            BaseLayout
        }
    })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

在向命名插槽提供内容的时候，我们可以在一个 <template>元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称，在base-layout组件内部<slot>元素有一个特殊的属性name，其值为v-slot的参数名称，没有name属性的<slot>元素会带有隐含的名字“default”。

当然v-slot也支持缩写语法，用“#”代替“v-slot”。

# 作用域插槽

在实际开发中有时候需要在父级的插槽内容中访问子组件的数据。这时可以在子组件的<slot>元素上使用v-bind指令绑定一个属性。代码如下：

let BaseLayout={
        template:`
               <div>
                    <header>
                        <slot name="header" :value="'我是base-layout组件的头部'"></slot>
                    </header>
                    <slot :value="'我是base-layout组件的主体'"></slot>
                    <footer>
                        <slot name="footer" :value="'我是base-layout组件的页脚'"></slot>
                    </footer>
                </div>
        `
    };
     template:`
            <div>
                <base-layout>
                    <template #header="slotProps">
                        <h1>{{slotProps.value}}</h1>
                    </template>
                    <template v-slot:default="slotProps">
                        <div class="main">{{slotProps.value}}</div>
                    </template>
                    <template #footer="slotProps">
                        <p>{{slotProps.value}}</p>
                    </template>
                </base-layout>
            </div>
        `,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 解构插槽属性

作用域插槽也可以使用ES6的解构语法来提取特定的插槽属性，代码如下：

let MyButton={
        data(){
            return {
                texts:{
                    title:"登录"
                }
            }
        },
        template:`
                <button type="button"><slot :value="texts">按钮</slot></button>
        `
    };
    template:`
            <div>
                <my-button type="button" v-slot="{value}">
                    {{value.title}}
                </my-button>
            </div>
        `,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 动态插槽名

动态指令参数也可以用在v-slot上，来定义动态插槽名，代码如下：

let BaseLayout={
        template:`
               <div>
                    <header>
                        <slot name="header"></slot>
                    </header>
                </div>
        `
    };
    new Vue({
        el:"#app",
        data(){
            return {
                headerName:"header"
            }
        },
        template:`
            <div>
                <base-layout>
                    <template #[headerName]>
                        <h1>我是页头</h1>
                    </template>
                </base-layout>
            </div>
        `,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#Vue基础

上次更新: 2022/06/01 11:01:52

← 组件的递归过渡与动画→