vue插槽（slot）详解

vue插槽（slot）详解

最近被问起是否了解vue的插槽（slot），咋一想发现，似乎很少用到这玩意。所以整理了下slot的一些用法。

slot (父组件 在子组件 处插入内容)

Vue 实现了一套内容分发的 API，将元素作为承载分发内容的出口，这是vue文档上的说明。具体来说，slot就是可以让你在组件内添加内容的‘空间’。举个例子：

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
  </div>
</template>

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton> </ebutton>
  </div>
</template>

我们知道，如果直接想要在父组件中的 中添加内容，是不会在页面上渲染的。那么我们如何使添加的内容能够显示呢？在子组件内添加slot 即可。

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button></button>
      <slot></slot>       //slot 可以放在任意位置。（这个位置就是父组件添加内容的显示位置）
  </div> 
</template>

子组件可以在任意位置添加slot , 这个位置就是父组件添加内容的显示位置。

编译作用域 （父组件 在子组件 处插入 data）
上面我们了解了，slot 其实就是能够让我们在父组件中添加内容到子组件的‘空间’。我们可以添加父组件内任意的data值，比如这样：

//父组件：（引用子组件 ebutton）
<template>