vue jsx 如何根据变量动态渲染指令?

Question

<el-input
  {
    if(this.isParent){
        v-model={this.parent}
    }else{
        v-model={this.child}
    }
  }
  placeholder='请输入'
/>
// 生成以下的 jsx 
<el-input
  v-model={this.parent}// isParent true
  placeholder='请输入'
/>
<el-input
  v-model={this.child}// isParent false
  placeholder='请输入'
/>

请问各位大佬是否有什么语法能实现这样的判断?

Answer 1

非要v-model动态绑的话可以用computed，自己写个get、set

或者你自己写个jsx编译后的，v-model在自定义组件上编译出来是这样的：

render(h) {
    return h("el-input", {
      "model": {
        value: this.a,
        callback: $$v => {
          this.a = $$v;
        }
      }
    });
  }