D 源码、知识点 4 vue中的 jsx (循环el-radio-group 添加事件引发的问题)
基于Vue CLI 3.x版本
使用vue的过程中,几乎没有使用过jsx的,当使用某些插件的时候,或多或少会接触到jsx,那就要求做到懂基本的知识!!
二:需求
项目中 使用vxe-table来实现表格功能,有个需求,如上图的界面,权限后台返回的数字,在前台需要用单选框展示,vxe-table有类似的例子,这里需要用jsx自己实现。
本次重点记录一个问题:循环展示的el-radio-group 组件添加一个相同的事件,点击某个单选框,所有的单选框都会执行 如图所示:
研究发现:造成这种问题的出现是由于自己在jsx的写法有问题
//问题写法 change={this.radio(row,rowIndex)} { field: 'address', title: '权限', width:250, showOverflow: true, slots: { // 使用 JSX 渲染函数 default: ({ row, column,rowIndex },h) => { return [ // <p> // <vxe-radio name={row.tagCode} v-model={row.access} label={0} >无权限</vxe-radio> // <vxe-radio name={row.tagCode} v-model={row.access} label={1} >只读</vxe-radio> // <vxe-radio name={row.tagCode} v-model={row.access} label={2} >读写</vxe-radio> // </p> <el-radio-group v-model={row.access} name={row.access} change={this.radio(row,rowIndex)}> <el-radio label={0}>无权限</el-radio> <el-radio label={1}>只读</el-radio> <el-radio label={2}>读写</el-radio> </el-radio-group> ]; } } },
//正确的方式 <el-radio-group v-model={row.access} name={row.access} onChange={evnt =>this.radio(evnt,row,rowIndex)}> <el-radio label={0}>无权限</el-radio> <el-radio label={1}>只读</el-radio> <el-radio label={2}>读写</el-radio> </el-radio-group>
补充:vxe-table给的例子,我觉得已经包含了很多jsx的基础知识!
例如:
插值 在JSX中使用单个括号来绑定文本插值
<span>Message: {this.messsage}</span> <!-- 类似于v-html --> <div domPropsInnerHTML={this.dangerHtml}/> <!-- v-model --> <el-input v-model={this.vm.name} />
事件绑定 需要在事件名称前端加上on前缀,原生事件添加nativeOn
<!-- 对应@click --> <el-buton onClick={this.handleClick}>Click me</el-buton> <!-- 对应@click.native --> <el-button nativeOnClick={this.handleClick}>Native click</el-button> <!-- 传递参数 --> <el-button onClick={e => this.handleClick(this.id)}>Click and pass data</el-button>
注意:如果需要给事件处理函数传参数,需要使用箭头函数来实现。如果不使用箭头函数那么接收的将会是事件的对象event属性。
结构 可以把组件拆分成一个个小的函数式组件,但是有一个限制是必需有一个外层的包裹元素
//错误写法 const Demo = () => ( <li>One</li> <li>Two</li> ) //正确写法 const Demo = () => ( <div> <li>One</li> <li>Two</li> </div> )
指令
在jsx中所有Vue内置的指令除了v-show以外都不支持,需要使用一些等价方式来实现,比如v-if使用三目运算表达式、v-for使用array.map()等。
遍历
在JSX中没有v-for和v-if等指令的存在,这些全部需要采用Js的方式来实现
{/* 类似于v-if */} {this.withTitle && <Title />} {/* 类似于v-if 加 v-else */} {this.isSubTitle ? <SubTitle /> : <Title />} {/* 类似于v-for */} {this.options.map(option => { <div>{option.title}</div> })}
更多 jsx 基础知识总结:https://www.jb51.net/article/173318.htm
555