Vue插槽 v-slot 指令

2.6.0版本，v-slot 指令取代了 slot 和 solt-scope 指令

 

编译作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

后备内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染

具名插槽

v-slot: 取代 slot="" , 切只能用在 <template> 标签内

<template v-slot:header></template>

作用域插槽

v-slot="" 取代 solt-scope=""

<template v-slot:default="slotProps">

 

 

---

 

作用域插槽 说明

有时让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的 <current-user> 组件：

<span>
  <slot>{{ user.lastName }}</slot>
</span>

我们可能想换掉备用内容，用名而非姓来显示。如下：

<current-user>
  {{ user.firstName }}
</current-user>

然而上述代码不会正常工作，因为只有 <current-user> 组件可以访问到 user 而我们提供的内容是在父级渲染的。

 

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

 

 

---

 

补充说明 ： 

学习中的实例，当使用 Element 的 table-column 组件时，会碰到 row 的参数 ，如下：

//2.6之前
<template slot-scope="scope">
    {{scope.row}}
</template>

//2.6之后
<template v-slot"anypropname">
    {{anypropname.row}}
</template>

//可以使用ES6 解构

<template v-slot"{row:row}">  //这一行可以直接简写为 {row}
    {{row}}
</template>

这里的 row 是 Element 特有的参数 ，代表 slot 中传入的一行的内容，参考如下