Vue学习日记---插槽

在开发项目的过程中插槽的使用是不可避免地，而且在View、Element-ui这些框架中都会有插槽的影子，今天就来说说插槽的使用。

<div id="app">
    <navigation-link url="/profile">
        Your Profile
    </navigation-link>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('navigation-link',{
        props: {
          url: String
        },
        template: `<a v-bind:href="url"
                        class="nav-link">
                        <slot></slot>
                    </a>`
    });
    new Vue({
        el: '#app'
    })
</script>

这也就是插槽最简单的使用方法啦，插槽内可以包含任何模板代码，包括组件。

image.png

具名插槽

<div id="app">
    <navigation-link v-slot="header" url="/profile">
        Your Profile
    </navigation-link>
    <base-layout>
        <template v-slot:header>
            <h2>我是导航</h2>
        </template>
        <template v-slot:default>
            <h2>我是内容</h2>
        </template>
        <template v-slot:footer>
            <h2>我是底部</h2>
        </template>
    </base-layout>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('navigation-link',{
        props: {
          url: String
        },
        template: `<a v-bind:href="url"
                        class="nav-link">
                        <slot></slot>
                    </a>`
    });
    const baseLayout = {
        template: `<div class="container">
                        <header><slot name="header"></slot></header>
                        <main><slot></slot></main>
                        <footer><slot name="footer"></slot></footer>
                    </div>`
    };
    new Vue({
        el: '#app',
        components: {
            'base-layout': baseLayout
        }
    })
</script>

跟着文档走一遍，具名插槽只会渲染通过v-slot绑定的组件，没有定义name的插槽默认为default

作用域插槽

还是引入官方的例子

<div id="app">
    <current-user>
        <template v-slot:default="slotProps">
            {{slotProps.user.firstName}}
        </template>
    </current-user>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const currentUser = {
        data() {
          return {
              user: {
                  firstName: 'chen',
                  lastName: 'jx'
              }
          }
        },
        template: `<div>
                        <span>
                              <slot v-bind:user="user">{{user.lastName}}</slot>
                        </span>
                    </div>`
    }
    new Vue({
        el: '#app',
        components: {
            'base-layout': baseLayout,
            'current-user': currentUser
        }
    })
</script>

插槽的主要用法就是这些，还有一些就是插槽的缩写语法，这些官方都解释的很清楚，就不在举例子啦！