Vue中的插槽（slot）

、

页面展示是这样的：

那么什么时候会用到slot呢，假设有个需求，除了template里的内容外，还要展示一些内容，但是这些内容不是由子组件所决定的，而是父组件决定的，

我们把content传递给子组件，当你接收了content之后，就可以在子组件中用插值表达式使用了

但是发现p标签出来了，我们可以给插值表达式套一个div，然后让div里面的v-html = this.content

首先这种处理方法的问题有：

1，你必须包裹一个div，不然是不行的

2，当你传递的东西比较多的时候，代码就会变得很难去阅读

当我们子组件有一部分内容是根据父组件传递过来的dom所显示的时候，就可以使用slot

当我们在父组件的child标签内部，插入一个p标签，看起来就像我用父组件帮你插入了一点内容，所以就叫做插槽，

既然父组件里插入了内容，那么子组件里就可以通过相应的方法来用到你传递过来的内容，这个方法就是使用

<slot></slot>标签

我们也可以在slot中添加一些默认内容

当有内容传递过来时，默认内容是不会显示的

当没有内容传递过来时，

默认内容就会显示出来

再来看一下插槽的一些注意事项：

结果是这样是因为，slot把两个header和footer都当做了一个插槽，所以会输出两次

但是我现在想显示：

header

content

footer

这样就可以了，在父组件中加入slot="XXXname" ，然后后再子组件中选择出来

这种方法叫做具名插槽

当不传入插槽时，插槽可以通过设置默认属性来显示