Vue render 函数和JSX语法的使用

基本使用

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

让我们深入一个简单的例子，这个例子里 render 函数很实用。假设我们要根据父组件传过来的数据决定显示哪个标签：

父组件：

<template>
  <div id="app">
    <level type="1">hello world</level>
    <level type="2">hello world</level>
    <level type="3">hello world</level>
    <level type="4">hello world</level>
  </div>
</template>

<script> import Level from './components/Level' export default { name: 'App', components: { Level } } </script>

Level组件：

<template>
    <div>
        <h1 v-if="type == 1"><slot></slot></h1>
        <h2 v-else-if="type == 2"><slot></slot></h2>
        <h3 v-else-if="type == 3"><slot></slot></h3>
        <h4 v-else-if="type == 4"><slot></slot></h4>
    </div>
</template>
<script> export default { name: 'Level', props:{ type: String || Number } } </script>

Level组件根据父组件穿过来的type来判断显示h1、h2、h3等标签，v-if 可以说用到了"极致",而且写了很多个冗余的slot

使用render函数和JSX语法来改写上面

Level.js文件

export default { props:{ type: String | Number }, methods:{ handleClick(e){ console.log(e.target) }, }, data(){ return {msg:'zf'} }, render(h){ //运行时
        // h('h' + this.type,{},[this.$slots.default])
        let tag = 'h' + this.type return <tag>
            <span value={tag} onClick={this.handleClick}>{this.$slots.default}</span>
            {this.msg} </tag>
 } }

省去了很多冗余代码，页面一下清爽了很多

用JSX语法实现v-model、v-if、v-for语法

v-model：

export default { methods:{ handleInput(e){ this.msg = e.target.value } }, data(){ return {msg:'zf'} }, render(){ //运行时return {/* 实现v-model */} <input type="text" value={ this.msg} onInput={this.handleInput}></input>
            {this.msg} } }

给input框顶一个value属性 一个input事件onInput，传值和监听事件改变值。

v-if: 三元表达式

render(){ return ( <div> {this.show?'好':'不好'} </div>
 ) }

简单的语法可以用三元表达式

复杂的语法还是要用if/else来判断

render(){ let ifText if(this.show){ ifText=<p>好</p>
        }else { ifText=<p>不好</p>
 } return ( <div> {ifText} </div>
 ) }

v-for：以menu菜单为例

import elMenu from "./el-menu"; import elMenuItem from "./el-menu-item"; import elSubmenu from "./el-submenu"; export default { //父组件传过来的数据
 props:{ data:{ type: Array, default:() => {} } }, data(){ return { menudata:[ {title: '根1', id: 1}, {title: '根2', id: 2, children: [ { title:'根2-1', id: 21, children: [ {title: '根2-1-1', id: 211}, {title: '根2-1-2', id: 212} ] } ] }, {title: '根3', id: 3}, {title: '根4', id: 4,children: [ {title: '根4-1', id: 41} ]} ] } }, render() { let renderChildren = (data) => { return data.map(child =>{ return child.children ? //判断是否有孩子
                //有孩子渲染elSubmenu
                <elSubmenu> 
                    <div slot="title">{child.title}</div>
 {renderChildren(child.renderChildren)} </elSubmenu> : //没有孩子渲染elMenuItem
                <elMenuItem></elMenuItem>
 }) } return <elMenu> {/* 循环遍历孩子 显示哪一个 */} {renderChildren(this.data)} </elMenu>
 } }

 用自定义组件

导入进来，不用再在components属性声明了，直接写在jsx中

<script> import HelloWolrd from './HelloWorld' export default { name: "item", render(){ return ( <HelloWolrd/>
 ) } } </script>

事件，class,style,ref等的绑定方式

render (h) { return ( <div // normal attributes or component props.
   id="foo"
   // DOM properties are prefixed with `domProps`
   domPropsInnerHTML="bar"
   // event listeners are prefixed with `on` or `nativeOn`
   onClick={this.clickHandler} nativeOnClick={this.nativeClickHandler} // other special top-level properties
   class={{ foo: true, bar: false }} style={{ color: 'red', fontSize: '14px' }} key="key" ref="ref"
   // assign the `ref` is used on elements/components with v-for
 refInFor slot="slot">
  </div>
 ) }

上面有个地方需要注意，当给自定义组件绑定事件时用nativeOnClick,而模板格式是用@click.native

 在实际开发中并不是全部都有renderJSX语法好或者全都用template好，而是在需要的地方两者结合使用，效果会更好。