Vue.js-函数化组件

学习笔记： 函数化组件

函数化组件

Vue提供了一个functional的布尔值选项，设置为true可以使组件无状态和无实例，也就是没有data和this上下文。这样用render函数返回虚拟节点可以更容易渲染，因为函数化组件只是一个函数，渲染开销要小很多。

使用函数化组件时，Render函数提供了第二个参数context来提供临时上下文。组件需要的data、prop、slots、children、parent都是通过这个上下文来传递。比如this.level要改写为context.props.level，this.$slots.default改变为context.children。

用函数化组件展示一个根据数据智能选择不同组件的场景：

See the Pen Vue-函数化组件-根据数据选择组件 by whjin (@whjin) on CodePen.

JSX写法：

See the Pen Vue-JSX by whjin (@whjin) on CodePen.

实战：留言列表

发布一条留言，需要的数据有昵称和留言内容，发布操作应该在根实例app内完成。留言列表的数据也是从app获取。

数组list存储了所有的留言内容，通过函数handleSend给list添加一项留言数据，添加成后把texrarea文本框置空。

Render函数内的节点使用v-model：动态绑定value，并且监听input事件，把输入的内容通过$emit('input')派发给父组件。

列表数据list为空时，渲染一个“列表为空”的信息提示节点；不为空时，每个list-item赢包含昵称、留言内容和回复按钮3个子节点。

this.list.forEach相当于template里的v-for指令，遍历出每条留言。句柄handleReply直接向父组件派发一个事件reply，父组件(app)接收后，将当前list-item的昵称提取，并设置到v-textarea内。

See the Pen Vue-留言列表 by whjin (@whjin) on CodePen.