vue中jsx

//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>

上面这种写法出现的问题

1.那就有太多的if判断
2.有太多的slot
如何去优化这样的情况呢？
我们可以使用jsx去处理这个问题的哈

使用render函数和jsx来解决上面这个问题

//item.vue子组件
<script>
export default {
  name: "item",
  props:{
    id:{
      type:Number,
      default:1
    }
  },
  // ${this.$slots.default[0].text} 获取传递给子组件的文本节点
  render(){
      const hText=` <h${this.id}>${this.$slots.default[0].text}</h${this.id}> `
      return <div domPropsInnerHTML={hText}></div>
  }
}
</script>

使用的页面

<template>
 <div>
    <!-- 这是自定义的一个组件 -->
    <h-title :id="id">Hello World</h-title>
    <button @click="next">下一个</button>
 </div>
</template>

<script>
 import Title from './item.vue'
 export default {
    data() {
      return {
          id:1
      }
    },
   components: {
     "h-title":Title
   },
   methods:{
      next(){
        if(this.id==6){
          return false
        }
        this.id++
      }
   }
 }
</script>

上述功能

当我们点击按钮的时候，标题就会从h1-->h6
我们使用jsx和render函数去实现的

render函数的简单使用

当我们点击按钮的时候，可以切换内容
<!-- 子组件 item.vue -->
<script>
export default {
    props:{
        show:{
            type:Boolean,
            default:true
        }
    },
    render(){
        let ifText
        if(this.show){
            ifText=<p>你帅</p>
        }else{
            ifText=<h1>你丑</h1>
        }
        return (
        <div>
            {ifText}
        </div>
        )
    }
}
</script>

使用的页面

<template>
 <div>
    <h-title :show="showFlag">Hello World</h-title>
    <button @click="next">改变</button>
 </div>
</template>

<script>
 import Title from './item.vue'
 export default {
    data() {
        return {
            showFlag:false
        }
    },
    components: {
        "h-title":Title
    },
    methods:{
        next(){
            this.showFlag=!this.showFlag
        }
    }
 }
</script>

render函数中执行v-for语句

<script>
  export default {
    props:{
      list:{
        type:Array,
        default:()=>{
            return ['嫣语赋','盛装','开端']
        }
      }
    },
    render(){
      return (
      <h2>
          {this.list.map((v)=>{
              return <p>{v}</p>
          })}
      </h2>
      )
    }
  }
</script>

jsx中使用v-model

<script>
  export default {
    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-vodel其实是语法糖

在jsx中｛｝中间是没办法写if/for语句的只能写表达式,用三元表达式来当判断了
v-model其实是一个语法糖，主要是使用两个点：传值和监听事件改变值。

jsx中怎么去使用组件了?

很简单，只需要导入进来.
不需要在components属性声明了，直接写在jsx使用就可以了

<script>
import TestCom from '@/components/test-com.vue'
export default {
  render(){
    return (
      <TestCom/>
    )
  }
}
</script>

render的描述

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