Vue 妙用渲染函数 & JSX

官方例子

FlexiableSlot.js

export default {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default, // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true,
    },
    content:{
      type:String,
      required:true,
    }
  },
  
}

父组件引用：

import FlexiableSlot from '../components/FlexiableSlot.js'
components:{
        FlexiableSlot
},
<template>
	<FlexiableSlot1 :level="1">
	        【一级标题】level值为1，表示渲染的是h1标签
	</FlexiableSlot1>
	
	<FlexiableSlot1 :level="2">
	        【二级标题】level值为2，表示渲染的是h2标签
	 </FlexiableSlot1>
</template>

当然也可以在父组件内直接注册

// import...
Vue.component("FlexiableSlot",{
render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default, // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true,
    },
    content:{
      type:String,
      required:true,
    }
  }
})
export default {

    components:{
       // 不用声明
    },
}

用render改写v-for+v-if的逻辑

itemList.js

export default {
    props: ['items'],
    render: function (createElement) {
        if (this.items.length) {
            // map 返回一个 <li> 数组
            return createElement('ul', this.items.map(function (item) { 
                return createElement('li', item.name)
            }))
        } else {
            return createElement('p', 'No items found.')
        }
    }
}

父组件

  import itemList from '../components/itemList.js'
  <itemList :items="items"></itemList> // first，second
  data(){
     return{
         items:[
             {
                 label:'用户管理',
                 name: 'first'
             },
             {
                 label:'配置管理',
                 name: 'second'
             }
         ]
     }
 },

Jsx

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

.babelrc(babel.config.js)配置

{
  	"presets": ["@vue/babel-preset-jsx"]
}

PS：如果报错，可把该配置删了试试

下面用jsx改写上面itemList的例子
itemList.js

export default {
    props: ['itemList'],
    render(){
        const itemList = this.itemList
        return(
            <ul>
                {
                    itemList.map((item)=>{
                        return(
                            <li>{item.name}</li>
                        )
                    })
                }
            </ul>
        )
    }
}

父组件引用即可

<item-list :itemList="itemList"/>