.sync 在 .vue 文件中写法很简单,

<comp :foo.sync="bar"></comp>

但是在 jsx 语法中, 这类指令, 双向绑定, 修饰符写起来, 确是麻烦的很, 有的时候不得不用 jsx 语法时, .sync 修饰符该怎么写呢?

首先 .sync 只是个语法糖, 真实语法是:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

以 element 的 dialog 组件为例, 那么 jsx 的写法就可以这么写:

    render(h) { // eslint-disable-line
        const listeners = { // 关键代码 - 1
            'update:visible': val => {
                this.show.dialog = val
            }
        }
        const content = this.show.dialog ?
            <el-form v-if="show.dialog">
                <el-form-item label="账号" label-width="120px">{ this.show.data.account }</el-form-item>
                <el-form-item label="信誉" label-width="120px">{ this.show.data.reputation_level }</el-form-item>
            </el-form>
            : ''
        return (
            <el-dialog title="基本信息" visible={this.show.dialog} {...{on: listeners }} width="501px">
                { content }
                <div slot="footer" class="dialog-footer">
                    <el-button on-click={this.handleHidden}>关 闭</el-button>
                </div>
            </el-dialog>
        )
    }