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

我们在前几期已经说过了组件的各种知识。

接下来我们就要学习插槽的内容了，插槽是Vue组件化开发的拓展内容。
官方文档种解释插槽的作用就是：在vue中实现的一套分发内容的API，将slot元素作为承载内容分发出口。

用大白话说就是：想要在一个组件标签中添加新的内容，必须在该组件内声明一个slot元素，否则，添加的新内容则不会被渲染。

通常我们会在vue中将各种通用的功能单独拿出来进行封装，以便于后面复用，但是有时候需要复用的组件不是完美契合，这个时候就需要用到插槽，slot可以让用户拓展组件，更好的实现组件的复用。

接下来我们用一个简单的例子实现一下匿名插槽。

我们现在设想一个业务场景，我们现在在做登录注册页面，登录注册的页面会有很多的按钮，当我们开发组件的时候，如果还像之前一样开发组件，我们会遇到哪些问题？

如果现在要做两个按钮，一个登录一个注册，组件化开发，它们的基本的内容架构是很类似的，我们要开发两个组件吗？
显然太笨重，违背组件化开发的初衷。
这个时候就要用到插槽了。

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

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

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

我们写了一个全局组件MBtn，也就是按钮。
在模板中，我们要尤其注意一点，在简单的button标签中，我写了一个slot标签，这个就是匿名插槽。
然后我们在局部组件App中，使用一下这个MBtn全局按钮组件。

插槽的好处是什么？

我们可以在使用的时候在这个组件的内部写需要的东西。
也就是我们之前提到的注册和登录，如果不用插槽的话，是没有办法直接在不使用JS的层面解决这个问题的。

具体看一下App这个局部组件的template模板中的内容，我们使用了两次这个MBtn组件，在里面可以任意嵌套想写的东西。

这样我们只需要使用一个组件就可以分别开发注册和登录按钮。

是不是很方便。
在一个页面中可能有很多很多的按钮，如果我们不用插槽的话，我们是没法在其中任意嵌套我们想用的内容的，就显得很死板。

其实插槽就可以简单理解为，我在那里留了一个位置，我还没有想好要放什么东西，但是我要先占着，等我想放东西，随时放。

插槽是分很多种的，我们这期先暂时了解一下匿名插槽的内容，后续的内容持续更新。

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

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