当父组件向子组件传值的时候，有时候，父组件传的并不是单纯的数值、字符串，有可能是带标签（DOM）的数据，那么如何传值呢？
如果我们像正常父向子传值那样操作。
<slott content="<p>hello,slot</p>"></slott>子组件：
<template>
<div class="slott">
<div>{{content1}}</div>
</div>
</template>
<script>
export default{
props:['content'],
data(){
return{
content1 : this.content,
}
}
}
</script>效果：
我们可以看到显示的并不是我们想要的，当然我们可以在子组件在接受的时候，使用v-html。
<template>
<div class="slott">
<div v-html='content1'></div>
</div>
</template>效果：
但是缺点是：多生成了一个div标签，那换成template模板占位符呢？是渲染不出来这个效果的。
div标签虽然可以实现，但是如果有很多DOM元素呢？显然不好控制，所以Vue中提供了slot插槽的方式
一.插槽
在父组件中直接插入正常的DOM结构
<slott>
<p>你好solt!</p>
</slott>然后在子组件用<slot>来代替，所以说slot是保留字，不能当做id的
<template>
<div class="slott">
<slot></slot>
</div>
</template>
<script>
export default{
props:['content'],
data(){
return{
content1 : this.content,
}
}
</script>效果：
效果：
二.引入header组件
在实际开发中，我们经常会遇到一种情况，将 header和footer传进来。
在父组件中：
<slott>
<div>header</div>
<div>footer</div>
</slott> 在子组件中：
<slot></slot>
<div>content</div>
<slot></slot>结果：
这是为什么呢？slot标签代表的显示插槽的所有的内容，那如何达到我们想要的效果呢？我们可以用具名插槽。
父组件的插槽中命名。
<slott>
<div slot="header">header</div>
<div slot="footer">footer</div>
</slott> 在子组件引用名称
<slot name="header"></slot>
<div>content</div>
<slot name="footer"></slot>效果：
附：slot标签可以有默认值，如果找不到相关的插槽，就会显示默认值。
在插槽中去掉header
<slott>
<div slot="footer">footer</div>
</slott> 在调用的时候找不到header的话，就会显示默认的内容
<slot name="header">default</slot>
<div>content</div>
<slot name="footer"></slot>效果：
二.作用域插槽
有时候，我们在使用插槽的时候，希望父组件可以控制插槽的内容，
什么时候用作用域插槽呢？当子组件做循环或者某一部分它的DOM结构应该由外部传递进来的时候，这个时候我们用作用域插槽
使用作用域插槽，子组件会向父组件的作用域里传递数据。
父组件使用插槽，要包含在template标签中。props是自定义的名字
eg：
<slott>
<template slot-scope="props">
<h1>{{props.item}}</h1>
</template>
</slott> 子组件往外传递数据：
<slot
v-for="item of list"
:item=item>
</slot>
//data中：
return{
list:[1,2,3,4]
}
效果：
父组件也可以改为li：
<slott>
<template slot-scope="props">
<li>{{props.item}}</li>
</template>
</slott> 效果：
这样的话，就实现了由父组件决定实现的内容