Vue插槽

        前边学习过组件基础后，我们知道组件能够接收任意类型的 JavaScript 值作为 props，但组件要如何接收模板内容呢？

       在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。除了通过函数传值，还可以用插槽。

1. 默认插槽

例如有个子组件Category.vue，其模板为：

<div>
  <slot></slot> <!-- 父组件提供的内容放在这里边 -->
</div>

在父组件中使用如下：

<Category>
  <button @click='beHappy'>点我会变开心<button><!-- 这里边放插槽内容 -->
<Category/>

<slot></slot>用于指定父元素提供的内容所放的位置。

2. 具名插槽

例如有个子组件Category.vue，其模板为：

<div>
  <!-- 父组件提供的内容放在这里边 -->
  <slot name="chacao1"></slot> 
  <slot name="chacao2"></slot>
</div>

在父组件中使用如下：

<Category>
  <!-- 这里是父元素要放在插槽的内容 -->
  <button @click='beHappy' slot="chacao1">点我会变开心<button>
  <img src="zzz" slot="chacao2"> 
  <img src="aaa" slot="chacao2"> 
  <img src="ccc" slot="chacao2"> 
<Category/>

button元素会被放在插槽1 的位置；img元素会被放在插槽2的位置。

三个img都要放在插槽2，可以用template包起来，写法如下：

<Category>
<!-- 这里是父元素要放在插槽的内容 -->
  <button @click='beHappy' slot="chacao1">点我会变开心<button>
<!-- 注意这里写法不太一样 -->
  <template slot:chacao2>
    <img src="zzz"> 
    <img src="aaa"> 
    <img src="ccc">
  </template> 
<Category/>

3. 作用域插槽

总结