插槽 通俗讲就是在子组件内预留位置 由父组件决定这个位置里要放什么内容
//在单个html文件内定义的组件
<script>
Vue.component('child',{
template:`
<div id='child'>
<h1>天气情况</h1>
//插槽名
<slot name='wea1'></slot>
<slot name='wea2'></slot>
</div>
`
}),
....
通过在child组件内留下具名的两个插槽(wea1,wea2)，给父组件留下了可填充的目标。
//填充插槽
<child>
<template v-slot:wea1>
<p>暴雨 12</p>
</template>
<template v-slot:wea2>
<p>多云 23</p>
</template>
</child>
填充结果
如果组件内存在没有命名的插槽（默认插槽） 直接使用v-slot。
//father
<template v-slot>
<p>未命名插槽</p>
</template>
//child
<div id='child'>
...
<slot>
//设定默认值为按钮
<button>默认值</button>
</slot>
</div>
默认插槽
插槽可以设定默认值，可以是字符串也可以是html语句
//father
<template v-slot>
//不给插槽赋值
</template>
//child
<div id='child'>
...
<slot>
//设定默认值为按钮
<button>默认值</button>
</slot>
</div>
插槽默认值.png
