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