Vue3组件的开发和组件的使用会有一些问题，如果你使用template写的那就没有这些问题，如果你jsx语法写的组件，怎么支持slos,props？

Template 语法和 Composition API 的语法差不多的，开发Vue组件一般需要考虑的是slots,props的传值问题，都是需要定义好。而jsx的语法开发组件有很多的坑需要注意。

---

组件的开发

Template

Template 语法的使用官方都有我就不写了哈 官方==〉 官方链接

// https://cn.vuejs.org/guide/components/slots.html#slots

Composition API

Composition API 语法的使用官方都有我就不写了哈 官方==〉 官方链接

// https://cn.vuejs.org/guide/components/slots.html#slots

jsx

jsx 的写法有两种吧，但是都差不多

defineComponent

    export const MyComponent = defineComponent({
      props: {
        key1: {
          type: String,
          default: 'key1',
          // ... attr
        }
      },
      setup(props, content) {
        return () => <>
          <div>
            <div> 具名插槽 slot1: {content.slots.slot1?.()} </div>
            <div> 具名插槽 slot2: {content.slots.slot2?.()} </div>
            <div> 默认插槽 default {content.slots.default?.()} </div>
          </div>
          <div>
              <div> props key1 {props.key1}</div>
              <div> props key2 {props.key2}</div> // props 需在props中声明后才能获取到使用
          </div>

        </>
      }
    })

jsx

import { PropType, SetupContext } from "vue";

type PropsType = {
  key1: string
  class?: string,
  onClick?: (e: MouseEvent) => void
}

export const MyComponent = (props: PropsType, content: SetupContext) => {
  return <>
        <div>
            <div> 具名插槽 slot1: {content.slots.slot1?.()} </div>
            <div> 具名插槽 slot2: {content.slots.slot2?.()} </div>
            <div> 默认插槽 default {content.slots.default?.()} </div>
          </div>
          <div>
              <div> props key1 {props.key1}</div>
          </div>
    <div></div>
  </>
}
MyComponent.displayName = 'MyComponent' // 很重要

组件使用jsx

这里只演示jsx中引用组件的写法 注意点：

1. props怎么传递

<MyComponent key1='key1' />

2. slots怎么传递、怎么使用

    <MyComponent v-slot={
        {
            slot1: ()=> <>slot1</>,
            slot1: ()=> <>slot1</>,
            default: ()=> <>default</>
        }
    } />

或者

<MyComponent>{{
slot1: ()=> <>slot1</>,
slot1: ()=> <>slot1</>,
default: ()=> <>default</>
}}</MyComponent>

1. 写组件时注意手动获取绑定class 和evelt
2. 引用组件时把slot当做props使用，但是赋值的时候需要注意⚠️