vue 组件开发之组件 slot (包含 scopeSlot)

发表于 更新于 分类于 本文字数： 515 阅读时长 ≈ 2 分钟

最近使用这个 slot, scopeSlot 真的是头大，因为官网本来介绍就少，只能用到哪不会，再查，最后东拼西凑，好像明白了什么… 厉害了，我是你的哥.

介绍

还是先简单说说 slot 和 scopeSlot 这两个东西，理解清楚了好理解后面的东西.

slot

slot 就是 Vue 用来分发内容的标签，可以具名，也可以匿名。匿名的 slot 只能存在一个，同时也是默认的 slot, 如果子组件__没有__定义具名 slot, 如 

1
<div slot="name">....</div>

这样的，那么这就是匿名的。如果一个组件连一个匿名的 slot 都没有，那么所有父组件赋予的内容都将丢失.

1
2
3
4
render(r){
	return r('div',[this.$slots.default, this.$slots.f])    
}
//此渲染函数将匿名slot和name="f"的slot的内容添加到div元素中. 
1
2
3
4
render(r){
	return r('div',[this.$slots.default, this.$slots.f, this.$scopedSlots.fff(this.info)])
}
//此渲染函数将匿名slot和name="f"的slot的内容添加到div元素中. 并且将<template slot="fff">...</template>元素放入div中

scopedSlots

是 Vue2.1.0 中新增的，意为作用域插槽. 

1
2
3
4
5
<t-t2>
  <p>fesfsfesafesafeasfase</p>
  <p slot="f">ffffffff</p>
  <template scope="prop" slot="fff">{{prop.name}},{{prop.age}}</template>
</t-t2>

如在上面的代码中，带有特殊属性 scope 的 template 元素能访问 prop (在渲染时传入的值), 在写 render 函数时，访问 scopedSlots 十分方便.

本实例中运用方式

本实例中在 UlTest 中的 t-table-item 中传入 template 元素，里面有个删除按钮，删除按钮绑定了当前行的所有数据，这就是通过 scopedSlots 实现的。如果不需要绑定数据，则直接 slot 就可以实现.


本例中实现方式：在 t-table-item 中传入 template 元素，然后 t-table-item 元素将 scopedSlot.default 传到父组件，父组件再将 scopedSlot.default 传到 t-tbody (原理上 t-table-item 可以直接传到 t-tbody, 即上节说的非父子通信), 应用时传入每行的数据源即可.(所有代码均可在 github 仓库找到)