vue学习笔记-插槽（slot）

定义：实现内容分发API，用于复合组件开发

分类

• 匿名插槽

<hello-world>你好，中国</hello-world>

<!--helloWorld component-->
<div>
  <p>
      <slot></slot>
  </p>
</div>
<!--渲染结果-->
<div>
  <p>
     你好，中国
  </p>
</div>

• 具名插槽：将内容分发到组件指定位置

<!--调用组件-->
<hello-world>
  <template v-solt:content>你好,中国</template>
  <template>你好,世界</template>
</hello-world>
<!--组件-->
<div>
  <p> <slot name="content"></slot></p>
  <p><slot></slot></p>
</div>
<!--渲染结果-->
<div>
  <p>你好，中国</p>
  <p>你好，世界</p>
</div>

其中匿名插槽，可以默认v-slot:default

  <!--匿名插槽与v-on:default一样-->
  <template v-solt:default>你好,中国</template>
  <template>你好,中国</template>

• 作用域插槽：分发内容要用到子组件中的数据

<!--使用组件-->
<hello-world>
  <template v-on:content="scope">
    来自于子组件的数据：{{scope.msg}}
  </template>
<hello-world>
<!--component-->
<div>
  <p>
      <slot msg="你好，中国"></slot>
  </p>
</div>
<!--渲染结果-->
<div>
  <p>
      来自子组件的数据：你好，中国
  </p>
</div>