vue3+ts组件传值

在Vue3中，可以使用props选项来声明组件的属性，使用setup函数来访问和使用这些属性。在使用TypeScript时，可以使用interface来定义props的类型，以确保类型安全。

例如，定义一个props为message的组件：

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

interface Props {
  message: string
}

export default defineComponent({
  props: {
    message: {
      type: String as PropType<Props['message']>,
      required: true
    }
  },
  setup(props: Props) {
    // 使用props.message
    return {
      message: props.message
    }
  }
})
</script>

然后在父组件中使用该组件时，可以通过v-bind指令将数据传递给message属性：

<template>
  <MyComponent :message="hello"></MyComponent>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import MyComponent from './MyComponent.vue'

export default defineComponent({
  data() {
    return {
      hello: 'Hello World'
    }
  },
  components: {
    MyComponent
  }
})
</script>

这样，MyComponent组件就可以使用父组件传递的message属性了。