梦入琼楼寒有月，行过石树冻无烟

Vue 插槽

2022-04-21


插槽在Vue组件中，是一个极为不可缺少的一个部分，对于插槽，我们可以理解为我们首先定义了一个 Error，之后通过使用<slot>元素让其输出关于Error后相关的内容，这在 Vue中通常被称之为后备内容。

默认插槽

1
2
3
4
5
6
7
8
9
10
11
12
13
    <div id="app">
        <solt-name></solt-name>
    </div>
    <script>
        Vue.component('soltName', {
            template: `
                <div>Hello</div>
            `
        })
    var vm = new Vue({
        el: '#app',
    })
</script>

后备内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <div id="app">
        <solt-name>world!</solt-name>
    </div>
    <script>
        Vue.component('soltName', {
            template: `
                <div>Hello,
                    <slot></slot>
                </div>
            `
        })
    var vm = new Vue({
        el: '#app',
    })
</script>

具名插槽


有时候我们如果需要多个插槽，那么通俗的来讲就是为分配一个名字，在一般的情况下没有名字的插槽将会被认定为是一个默认插槽，在上图中，我们主要定义了导航、正文、结尾等三个插槽，其中默认插槽被应用在导航中，而正文、结尾主要被具名插槽中的two以及three进行填写：

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
<style>
    .orset {
        margin-top: 10%;
    }
</style>
    <div id="app">
        <solt-name>
            <div class="orset" slot="two">正文</div>
            <div class="orset" slot="three">结尾</div>
        </solt-name>
    </div>
    <script>
        Vue.component('soltName', {
            template: `
                <div>
                    <solt>默认插槽</solt>
                    <slot name="two"></slot>
                    <slot name="three"></slot>
                </div>
            `
        })
    var vm = new Vue({
        el: '#app',
    })
</script>

作用域插槽


作用域插槽作为 vue 插槽中最为详细的一部分不仅仅是适用范围广，通常还可以搭配着 vue 指令来进行输出，本次案例我们主要会通过使用for来循环以及使用if来分别针对且有条件的对数据进行输出与使用：

输出

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
<div id="app">
    <slot-name :lists="Teamname">
        <template slot-scope="slotvm">
            {{slotvm}}
        </template>
    </slot-name>
</div>
<script>
    Vue.component('slotName', {
        props: ['lists'],
        template: `
            <div>
                <p v-for="list in lists">
                    <slot v-bind="list"></slot>
                </p>
            </div>
        `
    })
    var vm = new Vue({
        el: '#app',
        data: {
            Teamname: [
                { id:1, name: 'Jiangxue' },
                { id:2, name: 'Sif one' },
                { id:3, name: 'ZhongShan' }
            ]
        }
    })
</script>

条件输出

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
<div id="app">
    <slot-name :lists="Teamname">
        <template v-if="slotvm.id==1" slot-scope="slotvm">
            {{slotvm.name}}
        </template>
    </slot-name>
</div>
<script>
    Vue.component('slotName', {
        props: ['lists'],
        template: `
            <div>
                <p v-for="list in lists">
                    <slot v-bind="list"></slot>
                </p>
            </div>
        `
    })
    var vm = new Vue({
        el: '#app',
        data: {
            Teamname: [
                { id:1, name: 'Jiangxue' },
                { id:2, name: 'Sif one' },
                { id:3, name: 'ZhongShan' }
            ]
        }
    })
</script>

在上述code中，我们首先将数据使用v-for来进行循环输出，之后在通过使用v-if以及使用v-bind来进行绑定属性，最终通过满足条件即 Teamname中，id 为1的键值名称得到且输出。

va: http://jsrun.net/v2NKp/edit

⬅️ Go back