//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 更接近编译器。
