JSX在vue中使用

什么是JSX?

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析.

vue中大部分场景是不需要用render函数的,还是用模板更简洁直观.

使用template

// item.vue
<template>
 <div>
   <h1 v-if="id===1">
     <slot></slot>
   </h1>
   <h2 v-if="id===2">
     <slot></slot>
   </h2>
   <h3 v-if="id===3">
     <slot></slot>
   </h3>
   <h4 v-if="id===4">
     <slot></slot>
   </h4>
 </div>
</template>

<script>
   export default {
       name: "item",
       props:{
         id:{
           type:Number,
           default:1
         }
       }
   }
</script>

item组件中就是接收父组件传过来的id值来显示不同的h标签,v-if可以说用到了"极致",而且写了很多个冗余的slot

使用render函数和jsx

// item.vue
<script>
   export default {
       name: "item",
       props:{
         id:{
           type:Number,
           default:1
         }
       },
     render(){
         const hText=`
                       <h${this.id}>${this.$slots.default[0].text}</h${this.id}>
                     `
       return <div domPropsInnerHTML={hText}></div>
     }
   }
</script>

再加上父组件来控制props的值。父组件不做对比还用传统的template格式，

// list.vue
<template>
 <div>
   <h-title :id="id">Hello World</h-title>
   <button @click="next">下一个</button>
 </div>
</template>

<script>
 import Title from './item'

 export default {
   name: "list",
   data() {
     return {
       id:1
     }
   },
   components: {
     "h-title":Title
   },
   methods:{
     next(){
       ++this.id
     }
   }
 }
</script>

运行后页面就渲染出了h1 or h2 or h3标签，同时slot也只有一个，点击切换props的值，也会显示不同的h标签。第二种写法虽然不是很直接，但是省去了很多冗余代码，页面一下清爽了很多。

JSX中当属性值为函数时

<el-upload
    class='avatar-uploader'
    action='http://localhost:9501/upload'
    {...{
      props: {
        'on-change': () => {}
      }
    }}>
</el-upload>

JSX中自定义事件绑定的方法

render: (h) => {
    return (<el-pagination
        layout="prev, pager, next"
        total={50}
        onCurrent-change={ (v) => { console.log(v) } }> //原事件名为current-change ，前面加on
    </el-pagination>)
}

没了v-if,v-for,v-model怎么办？

不要着急，这些指令只是黑魔法，用js很容易实现。

• v-if

     render(){
          let ifText
          if(this.show){
              ifText=<p>你帅</p>
          }else{
              ifText=<p>你丑</p>
          }
          return (
            <div>
              {ifText}
            </div>
          )
        }
  
  

• v-for

•      data(){
          return{
            show:false,
            list:[1,2,3,4]
          }
        },
        render(){
          return (
            <div>
              {this.list.map((v)=>{
                return <p>{v}</p>
              })}
            </div>
          )
        }
  

  在jsx中｛｝中间是没办法写if/for语句的只能写表达式，所以就用map来当循环，用三元表达式来当判断了

• v-model两个点：传值和监听事件改变值。

    <script>
    export default {
        name: "item",
      data(){
        return{
          show:false,
          list:[1,2,3,4],
          text:'',
        }
      },
      methods:{
        input(e){
          this.text=e.target.value
        }
      },
      render(){
        return (
          <div>
            <input type="text" value={this.text} onInput={this.input}/>
            <p>{this.text}</p>
          </div>
        )
      }
    }
</script>

• v-html： 

  <p domPropsInnerHTML={html} />