在vue3中使用jsx实在是太自由啦~~

• 父组件是vue文件，子组件和孙组件是jsx文件

• 使用方法：

  • vue使用jsx组件：数据使用父子传参，模板使用插槽传递
  • jsx使用jsx组件：数据和模板都使用函数参数传递

• 父组件：index.vue

  
  <script lang="ts" setup>
  import Son from './Son.tsx'
  </script>
  
  <template>
    <div>
      <Son name="jimmy" :info="{ age: 22 }">
        <template v-slot:header>
          <h1>Header</h1>
        </template>
        <template v-slot:body>
          <p>Body1</p>
          <p>Body2</p>
          <p>Body3</p>
        </template>
      </Son>
    </div>
  </template>
  

• 子组件：Son.jsx

  import Grandson from './Grandson'
  
  export default function jsxComFn(props, value) {
    let { slots } = value
    console.log(props) // {name: 'jimmy',info: {age: 22}}
    console.log(value) // {attrs,emit,slots}
    console.log(slots) // {header,body}
  
    const body = slots?.body() // (3)[{...},{...},{...}]
    const divNode = (
      <ul>
        {[1, 2, 3].map((i) => (
          <li>{i}</li>
        ))}
      </ul>
    )
    
    return (
      <div>
        {slots?.header()}
        {body[0]}
        {body[1]}
      </div>
  	<div>Grandson:{Grandson({name:'jack',divNode})}</div>
    )
  }
  

孙组件：Grandson.jsx

export default function Grandson(params) {
  console.log('params -->', params)
  // {name:'jack',divNode:{...}}
    
  return (
    <div>
      <div>{params.name}</div>
      <div>{params.divNode}</div>
    </div>
  )
}

• 最终效果