一句话理解vue的slot插槽

理解:slot插槽好比是组件的变量,组件中用slot定义一个组件变量,然后在使用该组件时为变量赋值。
如:

  1. 在定义一个组件时,定义一个slot:child.vue
<template>   
  <div class="child">     
    <slot></slot>  <!-- 1.定义slot插槽 -->   
  </div> 
</template>
  1. 在另一个组件中使用child
<template> 
   <div class="main">
     这是main的内容
    <child> <!-- 2.使用组件,并给插槽赋值 -->
      <span>这是slot的具体内容</span>
    </child> 
  </div>
</template>

3.当组件被渲染时,<slot></slot>会被替换为<span>这是slot的具体内容</slot>,即

<div class="main">
  这是main的内容
  <div class="child">
    <span>这是slot的具体内容</span>
  </div>
</div>

可以理解为变量被赋值了

理解了slot的最基本含义和用法,再去看文档就简单多啦
vue官方文档

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。