Vue进阶（插槽）

插槽

插槽：父组件用来向子组件传递数据，我们使用UI库中常用到

1、普通插槽

（1）在父组件的子组件的两个标签中放入内容

    <template>
      <div>
        <h3>我是父组件</h3>
        <hr>
        <Son>
          <p>来自父组件的信息</p>   插入的内容
        </Son>
      </div>
    </template>

（2）子组件通过<slot></slot>标签来接收，最终slot标签会被父组件插进来的内容取代

    <template>
      <div>
        <h3>我是子组件</h3>
        <slot></slot>   子组件接收
      </div>
    </template>

2、具名插槽

（1）在父组件的子组件的两个标签中，传入的内容添加slot属性

    <template>
      <div>
        <h3>我是父组件</h3>
        <hr>
        <Son>
          <p slot="aaa">来自父组件的信息=>aaa</p>
          <p slot="bbb">来自父组件的信息=>bbb</p>
        </Son>
      </div>
    </template>

（2）子组件通过<slot name = "aaa"></slot>来接收

    <template>
      <div>
        <h3>我是子组件</h3>
        <slot name="aaa"></slot>
      </div>
    </template>