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

news/2024/7/10 2:35:01 标签: vue, js, html, 前端

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

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

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

html">   <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。