vue 中 jsx 怎么使用v-bind 呀？

Question

原本使用父子传值动态渲染组件 后来考虑到想把插槽也传过去就想到用jsx

父组件

<template>
  <div>
    <el-crud :options="crudOption" >
    
    </el-crud>
  </div>
</template>

<script>
import ElCrud from "@/components/crud";

export default {
  components: {
    ElCrud
  },
  data() {
    return {
          username: {
            title: "姓名",
            type: "input", //组件类型
            preperty:{
               type:"textarea",
               rows:"10"
            },  // 组件属性
            slot:[
              {
                render:function(h) {
                  return <div>123</div>
                },
              }
            ]
          },
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss">
</style>

子组件

     <el-form-item v-if="option.key && option.type == 'input'" :label="option.title ? option.title : option.key" :prop="option.key">
          <el-input v-bind="option.preperty" v-model="value" v-on:input="$emit('input', value)"  >
          </el-input>
     </el-form-item>

jsx版子组件

<script>
   export default {
       name: "item",
       props:{
          option:{
            type:Object,
            default:()=>{}
          }
       },
     render(){
         console.log(this.option)
         const {type,key,title,preperty,slot} =this.option
         let html 
         const prepertyArr = []
         for (let i in preperty){
             prepertyArr.push({[i]:preperty[i]})
         }
         console.log(...prepertyArr) // {type:'textarea',rows:"10"}
         if(type=='input'){
             html = (
                 <el-form-item label={title ? title : key} prop={key} >
                     <el-input  {...prepertyArr} ></el-input>
                 </el-form-item>
                 )
         }
       return (
          <div>
             {html}
          </div> 
       )
     }
   }
</script>

Answer 1

你可以使用 jsx 绑定属性的拓展写法：

<script lang="jsx">
export default {
  render() {
    const props = { type: 'textarea', rows: '10' }

    return (<Comp {...props}></Comp>)
  }
}
</script>

Answer 2

我的理解，不能用了，降级到普通的 js 去处理，像在 react 里一样。