VUE-JSX使用及案例

JSX

• 环境：
  使用vue-cli创建的项目不需要安装什么其他依赖包就可以使用。
• JSX语法

对比vue语法，jsx语法更直接
1、属性绑定
vue:
	<component :num="1"></component>
jsx:
	{
		...,
		render(){
			return <div>
					<component num={1}></component>
				</div>
		}
	}
2、事件绑定
	需要注意的是，传参数不能使用 onClick={this.myClick}，这样子会每次 render 的时候都会自动执行一次方法
应该使用 bind，或者箭头函数来传参
vue:
	<component @click="myClick"></component>
jsx:
	{
		...,
		render(){
			return <div>
					<component onClick={()=>this.myClick()}></component>
				</div>
		}
	}
3、自定义事件绑定
vue:
	<component @getValue="getMyValue"></component>
jsx:
	{
		...,
		methods:{
			getMyValue(value){}
		},
		render(){
			return <div>
					<component onGetValue={value=>this.getMyValue(value)}></component>
				</div>
		}
	}
4、列表渲染，jsx用map，vue用v-for
vue:
	<div v-for="item in arr">{{item}}</div>
jsx:
	{
		...,
		data(){
			return {
				arr:[1,2,3,4]
			}
		},
		render(){
			return <div>
					{
						arr.map(e=>{
							return <div>{e}</div>
						})
					}
				</div>
		}
	}
5、条件渲染
vue:
	<div v-if="num>1">{{num}}</div>
	<div v-else>0</div>
jsx:
	{
		...,
		data(){
			return {
				num:1
			}
		},
		render(){
			return <div>
					{
						if(num>1){
							<div>{num}</div>
						}else <div>0</div>
					}
					{
						num>1?<div>{num}</div>:<div>0</div>
					}
				</div>
		}
	}

• 案例：
  递归实现动态菜单。UI库: ant-design-vue

import Vue from "vue";

Vue.component('myMenu', {
    data() {
        return {
            indicator: [],
        }
    },
    props: {
        menus: {
            type: Array,
            default: () => [
            	{
            		title:"菜单1",
            		children:[
            			{
            				title:"菜单1-1",
            				children:[
            					{
		            				title:"菜单1-1-1",
		            				children:[
		            					
		            				]
		            			}
            				]
            			}
            		]
            	},
            	{
            		title:"菜单2",
            		children:[
            			{
            				title:"菜单2-1",
            				children:[
            					{
		            				title:"菜单2-1-1",
		            				children:[
		            					
		            				]
		            			}
            				]
            			},
            			{
            				title:"菜单2-2",
            				children:[
            					{
		            				title:"菜单2-1-1",
		            				children:[
		            					
		            				]
		            			}
            				]
            			}
            		]
            	},
			]
        },
    },
    activated(){
        this.getAllIndicator()
    },

    methods: {
        createMenu(obj) {
            if (obj.children && obj.children.length > 0) {
                return <a-sub-menu key={obj.code} onTitleClick={({ key, d }) => this.titleClick({ key, d })}>
                    <span slot="title">
                        <a-icon style="color:orange" type="folder" theme="filled" />
                        <span>{obj.title}</span>
                    </span>
                    {
                        obj.children?.map(e => {
                            return this.createMenu(e)
                        })
                    }
                </a-sub-menu>
            } else {
                return <a-menu-item key={obj.code}>
                    <a-icon style="color:orange" type="folder" theme="filled" />
                    {obj.title}
                </a-menu-item>
            }
        },
    },
    render: function (h) {
        return <div>
            <a-menu forceSubMenuRender={true} mode="inline" style="width: 256px" onSelect={({ item, key, selectedKeys }) => { this.$emit('onSelect', { item, key, selectedKeys }) }}>
                {
                    (this.menus || [])?.map(e => {
                        return this.createMenu(e)
                    })
                }
            </a-menu>

        </div>
    }
})