vue3 tsx父子组件传参

在Vue 3中使用TSX编写父子组件传参，可以通过props来实现。下面是一个简单的示例：

// 子组件 Child.tsx
import { defineComponent, PropType } from 'vue';

interface ChildProps {
  message: string;
}

const Child = defineComponent({
  name: 'Child',
  props: {
    message: {
      type: String as PropType<string>,
      required: true,
    },
  },
  setup(props: ChildProps) {
    return () => <div>{props.message}</div>;
  },
});

export default Child;

// 父组件 Parent.tsx
import { defineComponent } from 'vue';
import Child from './Child';

const Parent = defineComponent({
  name: 'Parent',
  setup() {
    const message = 'Hello from parent component';

    return () => (
      <div>
        <Child message={message} />
      </div>
    );
  },
});

export default Parent;

在父组件中，我们定义了一个名为`message`的变量，并将其作为属性传递给子组件`Child`。子组件中使用`props`接收该属性，并在模板中显示。

这样，父组件就可以通过属性传递数据给子组件了。你可以根据需要添加更多的属性，并在子组件中使用。