Uniapp TypeScript 页面接收传参

简介

在开发 Uniapp 应用时，我们经常需要在页面之间进行参数传递。而使用 TypeScript 开发 Uniapp 应用则更加规范和强类型。本文将介绍在 Uniapp 中使用 TypeScript 开发时，页面如何接收传参，并给出一些示例代码。

Uniapp 页面传参的方式

Uniapp 提供了多种方式来进行页面间的参数传递，包括 URL 传参、Vuex 状态管理、本地存储、事件总线等。在这篇博客中，我们将重点介绍 URL 传参的方式。

在 TypeScript 中接收传参

使用 TypeScript 开发 Uniapp 应用时，可以使用装饰器 @Prop 来定义页面接收的参数。首先，在页面组件中引入装饰器：

import { Component, Vue, Prop } from 'vue-property-decorator';

然后，在组件类中使用 @Prop 装饰器定义接收的参数：

@Prop({ default: '' }) private myParam!: string;

在上述代码中，myParam 就是我们要接收的参数名，string 是参数的类型。default: '' 表示如果接收的参数为空，则默认值为一个空字符串。

之后，我们就可以在页面组件中使用 myParam 这个变量来访问传过来的参数了。

export default class MyPage extends Vue {
  // 省略其他代码
  
  created() {
    console.log(this.myParam);
  }
}

示例代码

下面是一个完整的示例，演示了在 TypeScript 中接收传参：

<template>
  <div>
    <p>{{ myParam }}</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class MyPage extends Vue {
  @Prop({ default: '' }) private myParam!: string;

  created() {
    console.log(this.myParam);
  }
}
</script>

<style lang="scss" scoped>
/* 样式省略 */
</style>

结论

本文介绍了在 Uniapp 中使用 TypeScript 开发时，页面如何接收传参，并给出了一些示例代码。通过使用 @Prop 装饰器，我们可以规范和强类型地接收传参，并在页面中使用。希望这篇博客能对你有所帮助！

本文来自极简博客，作者：绮梦之旅，转载请注明原文链接：Uniapp TypeScript 页面接收传参