Vue的jsx中怎么写v-model

Question

使用了element ui的radio组件.这个组件必须传入v-model, 尝试过根据组件的文档传入name,还是不行

请教下各位vue的jsx语法糖怎么写上v-model,事例代码如下

renderContent(h, { node, data, store }) {
    return (

      <span class="organization-tree">
        <span>
        {
            !!data.children ?  
            <span>{data.label}</span> 
            : 
            <el-radio v-model={this.radioModel}> {data.label} </el-radio>
        }
        </span>
      </span>);
},

事例代码直接写入 v-model={this.radioModel}根本不行 感谢阅读

Answer 1

已用babel-plugin-jsx-v-model解决

参考1
参考2

Answer 2

https://github.com/nickmessing/babel-plugin-jsx-v-model
我没有用这个包，也能用v-model，具体不知道是哪个包起作用了

研究了一番
@vue/babel-plugin-transform-vue-jsx是用于vue2的，不支持v-model，但是我项目里确实是支持的，奇怪了。。。
难道跟@vue/babel-plugin-jsx这个vue3包有关？

懂了
https://github.com/vuejs/vue-cli/blob/f0f254e4bc81ed322eeb9f7de346e987e845068e/packages/%40vue/babel-preset-app/index.js#L130
看源码

if (vueVersion === 2) {
  presets.push([require('@vue/babel-preset-jsx'), jsxOptions])
} else if (vueVersion === 3) {
  plugins.push([require('@vue/babel-plugin-jsx'), jsxOptions])
}

所以vue2用的是@vue/babel-preset-jsx，vue3用的是@vue/babel-plugin-jsx

其中@vue/babel-preset-jsx又requires了下面这些包
"@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
"@vue/babel-plugin-transform-vue-jsx": "^1.2.1",
"@vue/babel-sugar-composition-api-inject-h": "^1.2.1",
"@vue/babel-sugar-composition-api-render-instance": "^1.2.4",
"@vue/babel-sugar-functional-vue": "^1.2.2",
"@vue/babel-sugar-inject-h": "^1.2.2",
"@vue/babel-sugar-v-model": "^1.2.3",
"@vue/babel-sugar-v-on": "^1.2.3"

@vue/babel-sugar-v-model即起到了类似babel-plugin-jsx-v-model的作用