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

Z时代
2024-02-25
分类：IT

原本使用父子传值动态渲染组件后来考虑到想把插槽也传过去就想到用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>

回答：

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

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