uniapp的vue3+ts组件传参怎么写
时间: 2024-02-07 16:03:39 浏览: 24
在 Uniapp 中使用 Vue3 + TypeScript 编写组件时,可以使用 `prop` 来定义组件的属性,并在组件内部使用 `props` 接收这些属性。
例如,定义一个名为 `MyComponent` 的组件,传入一个名为 `text` 的字符串属性:
```vue
<template>
<div>{{ text }}</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
export default defineComponent({
name: 'MyComponent',
props: {
text: {
type: String as PropType<string>,
required: true
}
}
})
</script>
```
在使用 `MyComponent` 时,可以通过 `:text` 的方式传入文本:
```vue
<template>
<MyComponent :text="'Hello, world!'"/>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import MyComponent from '@/components/MyComponent.vue'
export default defineComponent({
name: 'MyPage',
components: {
MyComponent
}
})
</script>
```
注意:在 TypeScript 中,需要使用 `PropType` 来指定属性的类型,否则会编译错误。同时,由于 Uniapp 使用了跨平台的技术,因此需要在组件名称后面添加 `.vue` 后缀。