使用 Vue.js 编写无渲染组件

本文将介绍:

  • 无渲染组件怎么用
  • 何时使用无渲染组件

无渲染组件怎么用#

无渲染组件是不渲染 html 元素的组件#

这是一个最简单的无渲染组件示例,用来说明技术上怎么做:


See the Pen
vue-renderless-blank-component
by Marshal Wu (@marshalw)
on CodePen.

这个名为 RenderlessComponent 的无渲染组件,没有做任何事情。

但它说明了无渲染组件的技术本质,这样的组件,不渲染任何自己的 html 元素,因为没有。

可以通过 slot 加入父组件的元素#

再展示一个稍微有用的无渲染组件示例,虽然自己不渲染 html 元素,但是通过 slot 可以加入父组件并向父组件传数据:


See the Pen
vue-renderless-simple-component
by Marshal Wu (@marshalw)
on CodePen.

在本示例中:

  • 通过 propsrenderless-component 传递了参数 userId
  • 通过 slot-scoped,从renderless-component传给父组件参数 userName

更复杂的 slot-scoped 使用方式#

这个示例:

  • input 输入姓名,比如 张三
  • 点击提交按钮,终端会显示 submit 张三 .. ok


See the Pen
vue-renderless-input-component
by Marshal Wu (@marshalw)
on CodePen.

看起来是很普通的示例,但:

  • newUserName 是保存在 renderless-component 中的,再通过 slot-scoped 传递给父组件
  • 有关 button 和 input 的事件处理函数,都封装在 renderless-component 中,但可以传递给父组件使用

父组件负责渲染子组件负责加载数据#

一个简单的下拉选择示例:


See the Pen
vue-renderless-binding-component
by Marshal Wu (@marshalw)
on CodePen.

renderless-component 负责加载列表数据,并模拟了异步加载。

父组件负责渲染列表。

何时使用无渲染组件#

主要有两种情况:

  • 希望抽象业务和表示的时候,比如上面下拉菜单示例
  • 数据和行为类似,但可能有多种界面的情况,还是拿下拉菜单示例来说,父组件可以是 input radio 按钮,它们可以复用相同的renderless-component