JSX 在 Vue 项目上的应用

2019.06.22 默认分类 0 评

起因是使用 iView2.x Table 组件时，需要用到 render 函数显示自定义的内容。

从渲染简单的文字，到自定义组件，甚至捕获组件事件。

简单的用法

render: (h, params)=>{
    const title = params.row.title

    if(!params.row.title) return "—"
    return <span>{ title }</span>;
}

复杂的用法

大部分的模板指令都不适用于这种 JSX ，除了 v-show，相关功能需要自己实现。

render(h, params){
    const item = params.row;
    
    const enabledHtml  = <a href="javascript:;" onClick={ ()=>vm.publish(item) }>发布</a>;
    const disabledHtml = <a href="javascript:;" onClick={ ()=>vm.recall(item) }>撤回</a>;
    return (
        <adm-link-group>
            { [enabledHtml, disabledHtml][item.status] }
            <router-link to={ {name: `${ROUTER}`, params:{ id }, query: { }} }>
                <a href="javascript:;">修改</a>
            </router-link>
            <a href="javascript:;" class="" onClick={ ()=>vm.destroy(item) }>删除</a>
        </adm-link-group>
    );
},

动态绑定 v-bind 指令，去掉了 : 写法，用一对花括号 { } 取代
在花括号内 { } 使用表达式，判断需要渲染的内容
返回的模板中可以使用自义定组件如 <adm-link-group></adm-link-group> （小写字符开头）

组件捕获事件

render(h, params){
    const item = params.row
    return (
    <iv-select
        style={{ width: '120px' }}
        v-model={item.comment_status} vOn:on-change={ (val)=> { vm.saveCommentRule({val, item}) } } >
        <iv-option key={1} value={1}> 先审核后显示 </iv-option>
        <iv-option key={2} value={2}> 先显示后审核 </iv-option>
    </iv-select>)
},

根据 Babel Preset JSX - Directives 说明，元素和组件的事件监听器 v-on 缩写 @ 写法有差别，原先在模板中是这样使用的：

<iv-select @on-change="selectChanged" ></iv-select>

在 JSX 中：

<iv-select vOn:on-change={ vm.selectChanged } ></iv-select>

模板渲染 & JSX

多数情况下都在使用 template 方式创建视图，因为有 v-if v-for 等指令减少了工作量。

渲染函数可以让我们使用 JavaScript 编程的方式创建视图层的东西。

createElement

createElement 可以创建虚拟节点 VNode，把这个 VNode 返回给 render 函数即可：

render: (h, params) => {
  return h('div', [
    h('Icon', {
      props: {
        type: 'person'
      }
    }),
    h('strong', params.row.name)
  ]);
}