vue中slot插槽的使用

插槽的作用：个人理解，如果子组件需要显示的东西不是自己的，而是由父组件传递进来的则使用slot，父组件可以使用插槽往子组件传递任何东西

<navigation-link url="/profile">
  Your Profile
</navigation-link>

如果 <navigation-link> 没有包含一个 <slot> 元素，则任何传入它的内容都会被抛弃。

单个插槽

<!--在父组件里使用子组件-->
<son-tmp>
    <div>我是文字，我需要放到son-tmp组件里面制定的位置</div>
</son-tmp>

<!--在son-tmp子组件里使用-->
<div>
    <slot>这里是父组件插入的内容</slot>
</div>

多个插槽（具名插槽）

<!--父组件-->
<test-slot>
  //slot=one这个div会替换掉子组件里name="one"的slot标签
  <div slot="one">
    <span>第一个</span>
  </div> 
  //这个div没有用slot指定名字所以会替换掉子组件里没有name属性的slot标签
  <div>
    <span>此div没有slot</span>
  </div>
</test-slot>

<!--在子组件里使用-->
<div>
  <slot></slot> 
</div>
<div>
  <slot name="one"></slot> 
</div>

作用域插槽

有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。

<!--子组件-->
<!-- 将 `todo` 对象作为一个插槽的 prop 传入。-->
<slot :todo="todo">
  <!-- 回退的内容 -->
  {{ todo.text }}
</slot>

<!--父组件-->
// 当我们使用 <todo-list> 组件的时候，
// 我们可以选择为待办项定义一个不一样的 <template> 作为替代方案，
// 并且可以通过 slot-scope 特性从子组件获取数据
<todo-list :todos="todos">
  <!-- 将 `slotProps` 定义为插槽作用域的名字 -->
  <template slot-scope="slotProps">
    <!-- 为待办项自定义一个模板，-->
    <!-- 通过 `slotProps` 定制每个待办项。-->
    <span v-if="slotProps.todo.isComplete">✓</span>
    {{ slotProps.todo.text }}
  </template>
</todo-list>

<!--slot-scope中也可以使用ES6结构语法-->
<todo-list :todos="todos">
  <template slot-scope="{ todo }">
    <span v-if="todo.isComplete">✓</span>
    {{ todo.text }}
  </template>
</todo-list>

在 2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽内的任何元素或组件上。