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>
}
})