vue3+ts+vite组件传参

在Vue3 + TypeScript + Vite项目中，组件之间的传参通常使用props（属性）机制。TS会提供更强的类型安全性和约束，让代码更清晰易读。以下是基本步骤：

1. **定义props**：在父组件（通常是组建库使用者）中，通过`<template>`标签的`prop`属性声明接收到的组件参数，例如：

   <SomeComponent :message="parentMessage" :color="parentColor"></SomeComponent>

这里`:message`和`:color`是prop的名称，它们分别对应`parentMessage`和`parentColor`这两个变量。

2. **传递数据**：在父组件的data或methods中，定义并初始化这些值：

   export default {
     data() {
       return {
         parentMessage: 'Hello from parent',
         parentColor: 'blue',
       };
     }
   };

3. **接收和使用props**：在子组件（SomeComponent）的`setup`或`script setup`部分，可以访问到从父组件传递过来的prop：

   import { defineComponent, ref } from 'vue';

   const SomeComponent = defineComponent({
     props: {
       message: { type: String, required: true }, // 强制类型检查
       color: { type: String },
     },
     setup(props) {
       const childMessage = ref(props.message);
       // 使用props.color...
       return { childMessage, ... };
     },
   });