vue slot

1. 什么是插槽：

引入的子组件标签中间是不允许写内容的。为了解决这个问题，官方引入了插槽(slot)的概念。

插槽，其实就相当于占位符。它在组件中给你的HTML模板占了一个位置，让你来传入一些东西。插槽又分为匿名插槽、具名插槽以及作用域插槽。

子组件：

<template>
    <div>
      <ul>
        <li v-for="(item, index) in data" @click="changeMe(index)">{{ item.label }}</li>
      </ul>
      <slot></slot>
    </div>
</template>

父组件

<zujian :data="options" @addClick="changeOption">
   <p>我是插槽内容</p>
</zujian>

父组件中的p标签，如果子组件没有设置slot的话就不会显示；

插槽的显示、隐藏是父组件控制的，在哪里显示是子组件控制的；