vue2.x中slot插槽的使用

slot翻译为插槽，子组件中有一部分内容可以根据父组件传过来的dom进行显示，用slot标签表示；父组件可以在这个占位符中填充内容。
若是子组件中没有slot，则父组件传给它的任何内容都不显示!

1.匿名插槽

父组件传递到子组件的内容需要子组件用slot来占位置

<!-- 父组件 -->
<template>
    <div>
        <Child>
            <div>3.8女神节!</div>
        </Child>
    </div>
</template>
<!-- 子组件 -->
<template>
    <div>
        <h1>今天的节日是：</h1>
        <slot></slot>
    </div>
</template>

2.具名插槽

子组件中name的名字与父组件中slot的值相对应, 没有提供 name 的 出口会隐式地命名为default

<!-- 父组件 -->
<template>
  <div>
    <Child>
       <div slot="child">今天你真的好美!</div>
       <!-- 或者写v-slot, v-slot简写为#, 但只能写在template上, vue3.0语法-->
       <template v-slot:child>今天你真的好美!</template>
       <template #child>今天你真的好美!&