vue的插槽 slot

	简单的理解插槽就是“占坑”，在子组件占好了位置，那父组件使用该子组件标签
	时，新添加的DOM元素就会自动填到这个坑里面加粗样式

1.匿名插槽

子组件

<template>
    <div>
        <div>hello world</div>
        <slot></slot>
    </div>
</template>

父组件

<template>
  <div class="container">
    <children>
      <div>呵呵哒</div>
    </children>
  </div>
</template>

2.具名插槽

子组件

<template>
    <div>
        <div>hello world</div>
        <slot></slot>
        <slot name='zhangsan'></slot>
        <slot name='lisi'></slot>
    </div>
</template>

父组件

<template>
  <div class="container">
    <children>
      <div>呵呵哒</div>
      <!-- <div slot="zhangsan">我是张三</div> -->
      <!-- 注：slot 这个属性已经被废弃 官方建议是使用 v-slot -->
      <template v-slot:zhangsan>
        <div>
            我是法外狂徒 张三
        </div>
      </template>
      <template v-slot:lisi>
        <div>
            我是老好人 李四
        </div>
      </template>
    </children>
  </div>
</template>

这块可以参考下官方文档 https://cn.vuejs.org/v2/guide/components-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD

3. 作用域插槽

子组件

<template>
    <div>
        <div>hello world</div>
        <slot></slot>
        <slot :data='zhangsan' name='zhangsan'></slot>
        <slot :data='lisi' name='lisi'></slot>
    </div>
</template>

<script>
export default {
    data() {
        return {
            zhangsan: {name: '张三',},
            lisi: {name: '李四',}
        }
    },
}
</script>

父组件

<template>
  <div class="container">
    <children>
      <div>呵呵哒</div>
      <!-- <div slot-scope=="data">我是{{data.name}}</div> -->
      <!-- 注： slot-scope 这个属性已经被废弃 官方建议是使用 v-slot -->
      <template v-slot:zhangsan='{data}'>
        <div>
            我是法外狂徒 {{data.name}}
        </div>
      </template>
      <template v-slot:lisi='{data}'>
        <div>
            我是老好人 {{data.name}}
        </div>
      </template>
    </children>
  </div>
</template>