函数，通过这种方式实现了默认值，可以让我们调用时更灵活，更方便。 组件，也应该有默认模板，当我们调用一个组件，啥都不传时，显示我们定义的默认模板，当我们传了自定义模板时，就应该使用我们自定义的模板，来替换默认模板，那么，今天说的slot，其实它就是实现的这个功能，下面以类似官方的例子进行解释。 例如，现在有一个子组件 child，代码如下： ~~~ <div> <h2>我是子组件的标题</h2> <slot> <p>当父组件调用我时，没有传自定义内容时，我就会显示了，如果传了自定义内容，我就不显示了。也就是说我是默认的文案！</p> </slot> </div> ~~~ 我们在父组件调用时，可以分为两种情况，第一种是不传自定义内容，第二种是传入自定义内容。 第一种不传自定义内容： ~~~ <div> <h1>我是父组件的标题</h1> <child></child> </div> ~~~ 渲染结果： ~~~ <div> <h1>我是父组件的标题</h1> <div> <h2>我是子组件的标题</h2> <p>当父组件调用我时，没有传自定义内容时，我就会显示了，如果传了自定义内容，我就不显示了。</p> </div> </div> ~~~ 第二种传入自定义内容： ~~~ <div> <h1>我是父组件的标题</h1> <child> <p>我是传入子组件的一个参数，我会覆盖掉默认文案！</p> </child> </div> ~~~ 通过上面，基本上就能理解了，slot标签中的内容，就是默认内容，当调用子组件没有写入其他内容时，就会把子组件中的slot内容，默认显示出来；如果写入了其他内容，就会用写入的内容，替换掉slot中的内容，所以，我把它理解为默认模板。 但是可以看到，这种方式过于粗暴，并且只能定义一块默认内容，不是很方便，所以官方说了，slot还提供了一个具名功能，意思就是，在子组件定义slot时，加个标识，在父组件调用，自定义内容时，也加上标识，这样就实现了可以在任意地方定义默认内容。 假设子组件依然叫child，代码如下： ~~~ <div class="container"> <header> <slot name="header"><h1>默认header</h1></slot> </header> <main> <slot><p>默认main</p></slot> </main> <footer> <slot name="footer"><p>默认footer</p></slot> </footer> </div> ~~~ 第一种不传自定义内容： ~~~ <div> <child></child> </div> ~~~ 渲染结果： ~~~ <div> <div class="container"> <header> <h1>默认header</h1> </header> <main> <p>默认main</p> </main> <footer> <p>默认footer</p> </footer> </div> </div> ~~~ 第二种传入自定义内容（具名的slot）： ~~~ <div> <child> <h1 slot='header'>自定义标题</h1> <p slot='footer'>自定义底部</p> <p>自定义main</p> </child> </div> ~~~ 渲染结果： ~~~ <div> <div class="container"> <header> <h1>自定义标题</h1> </header> <main> <p>自定义main</p> </main> <footer> <p>自定义底部</p> </footer> </div> </div> ~~~ 通过上面代码能看出，在子组件定义slot加个name属性值，在父组件调用时，加上slot属性，值就是子组件中slot的name属性值，这样就会自动定位到对应的slot中，就实现了多个地方定义默认内容。 渲染出来的结果是不会含有slot标签的，slot都会替换成它里面的内容（HTML），如果有具名的slot就替换成具名的slot，这就是slot，成为分发内容，刚开始接触会比较陌生，实际上稍微变一下理解，一下就懂了。 那么实战中有什么作用呢？