Vue 中 JSX 语法踩坑记录

v-bind、v-on

<div v-bind="this.$attr" v-on="this.$listeners"></div>

// JSX语法中

<div {...{ attrs: $attrs, on: $listeners }}></div>

组件使用.sync 语法糖传递参数时（比如 element 的 el-dialog 组件会使用:visible.sync="dialogVisible"

// template的sync语法糖:
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>内容</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmUnbind">确 定</el-button>
      </span>
</el-dialog>

// template非语法糖
<el-dialog title="提示" :visible="dialogVisible" @update:visible = "val => this.dialogVisible = val"  width="30%">

// JSX 这么写
<el-dialog title="提示" visible={this.dialogVisible} {...{on:{'update:visible': val => this.dialogVisible = val}}} width="30%">
    <span>内容</span>
    <span slot="footer" class="dialog-footer">
        <el-button onClick={()=>...}>取 消</el-button>
        <el-button type="primary" onClick={xxx函数名}>确 定</el-button>
    </span>
</el-dialog>

v-popover.popover 指令

// .vue
<el-select v-popover.popover></el-select>

// JSX

<el-select {...{
	directives:[
		{ name : 'popover' , modifiers : { popover : true }}
	]
}}></el-select>

v-html

<div v-html="htmlCom"></div>

<div { ...{ domProps:{ innerHTML : htmlCom } } }></div>

slot 相关

// template
<el-tooltip ref="tooltip" v-bind="tooltipProps">
    <div slot="content"></div>
</el-tooltip>

// JSX

<el-tooltip ref="tooltip" v-bind="tooltipProps">
    <div {
    	...{
    		slot:'content'
    	}
    }></div>
</el-tooltip>

v-model 相关

// template
<el-input v-model="input">
  <div slot="content"></div>
</el-input>

// JSX

<el-input>
  <div slot="content"></div>
</el-input>