插槽 通俗讲就是在子组件内预留位置 由父组件决定这个位置里要放什么内容

//在单个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