vue插槽

1、普通插槽

子组件

  <slot></slot>

父组件

  <child>
        <demo>插入内容</demo>
  </child>

2、具名插槽

子组件

  <slot name="child1"></slot>

2.1 父组件

  <child>
        <demo slot="child1">插入内容</demo>
  </child>

2.2 父组件

  <child>
        <templete v-slot:childl>
              <demo>插入内容</demo>
        </templete>
  </child>

3、作用域插槽

子组件

  <slot :data="child_data"></slot> //定义插槽属性data，data属性中的值为子组件中的数据child_data

3.1 父组件

  <child>
        <templete slot-scope="name"> //父组件通过slot-scope绑定一个对象，该对象内存储了{子组件属性名:子组件数据}
              <demo>{{name.data}}</demo> 
        </templete>
  </child>

3.2 父组件

  <child>
        <templete v-slot="name">
              <demo>{{name.data}}</demo>
        </templete>
  </child>