普通、具名、默认、默认值插槽

在子组件内写html标签，需要利用插槽把内容在子组件里进行显示

1-普通插槽

父组件：父组件中利用组件进行标签内容的包含操作

<AppQuote>
    <h1>标题</h1>
    <p>内容</p>
</AppQuote>

子组件：只需要利用slot插槽就可以将父组件中带标签的内容进行显示

<slot></slot>

2-具名插槽

父组件：在父组件中可以设置slot属性，并且设置slot的名称

<AppQuote>
   <h1 slot="title">{{quoteTitle}}</h1>
   <p slot="content">内容</p>
</AppQuote>

子组件：子组件中就利用slot属性并设置name对应父组件中slot的名称内容

<slot name="title"></slot>
<slot name="content"></slot>

3-默认插槽 ： 将具名插槽以外的元素显示

父组件：

<AppQuote>
   <h1 slot="title">{{quoteTitle}}</h1>
   <p slot="content">内容</p>

   <span>其他内容</span>
   <p>默认插槽</p>

   <p slot="subTitle"> 我设置了默认插槽 </p>
</AppQuote>

子组件：

<slot name="default"></slot>
或者， name="default"可不写
<slot></slot>

4-插槽的默认值

子组件中可以直接设置slot的名称，而父组件中所对应的slot并不一定必须存在，如果没有则默认显示子组件中的slot的元素内容，但如果父组件中进行了定义slot名称，并且与子组件中的slot名称所对应，那么则显示父组件中传递的内容

父组件：

<AppQuote>
   <p slot="subTitle"> 我设置了默认插槽 </p>
</AppQuote>

子组件：

<slot name="subTitle"> name为subTitle 插槽的默认值 </slot>