Vue知识点总结(16)——具名插槽（超级详细）

上节我们了解了一下插槽的概念和用途，并且详细演示了一下匿名插槽的使用。
这期我们的任务是具名插槽。

从名字我们就可以看出区别，一个是匿名，一个是具名。

我们就不详细说插槽概念的东西了，直接演示具名插槽。

   <div id="app">
        <App></App>
    </div>

<script>
    Vue.component('MBtn',{
        template:`
            <button>
                <slot name='login'></slot>
                <slot name='submit'></slot>
                <slot name='register'></slot>
            </button>
        `
    })
    const App = {
        data () {
            return {
                title:'老爹'
            }
        },
        template:`
            <div>
               <MBtn>
                    <template slot='login'>
                        <a href="#">登录</a>
                    </template>
                </MBtn>
               <m-btn>
                    <template slot='register'>
                        注册
                    </template> 
               </m-btn>
               <MBtn>
                    <template slot='submit'>
                        提交
                    </template>
               </MBtn>
            </div>
        `,
    }
    new Vue({
        el:'#app',
        data:{

        },
        components: {
            App
        }
    });
</script>

具名插槽和匿名插槽的区别主要就是slot标签上加了一个name属性。

一个不带 name 的 出口会带有隐含的名字“default”。

在示例中，我们和上期一样，写了一个全局组件MBtn，内部分别演示了三个按钮，登录、提交、注册，分别写了三个name属性，login、submit、register。

然后像往常一样，我们写了一个App局部组件。在template模板中，我们调用MBtn组件的同时，在内部插入一个template标签，我们就是在template这个标签上写slot属性，slot属性的值就是要使用的插槽的名字。

只要匹配到slot标签的name值，template中的内容就会被插入到这个槽中

然后一点，我们注意一下，在MBtn组件上写模板插槽的顺序是login、submit、register。我们在App组件上调用的时候顺序是login、register、submit。
那页面渲染出来是什么顺序呢？

顺序是login、register、submit。

显然页面渲染的顺序是调用时的顺序。
也就是说，我们在写模板插槽的时候，插槽的顺序并不重要，重要的是调用时的顺序。

这个细节还是要注意一下的，我有次在别人的面经上看到过这个问题。

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！