uni-app页面传参接收后怎么立即用过滤器处理-uni-app-PHP中文网

不能在页面传参后立即用过滤器处理，因为uni-app的filters仅在vue 2模板编译时生效，小程序/app端不支持，且vue 3已移除；应改用工具函数显式调用。

uni-app页面传参接收后怎么立即用过滤器处理

不能在页面传参接收后“立即用过滤器处理”——因为 uni-app 的过滤器（filters）不是运行时可调用的函数，它只在模板插值（{{ }}）和 v-bind 中被编译器识别，且仅在 Vue 2 模式下对 H5 有效；小程序和 App 端压根不解析 | 管道符，更不存在“接收参数后立刻调用过滤器”这回事。

为什么 `onLoad` 或 `onShow` 里调用过滤器会失败

很多人试图在生命周期里这样写：

onLoad(options) {
  this.rawId = options.id
  // ❌ 错误：this.$options.filters.formatId 不存在或未执行
  this.formattedId = this.$options.filters.formatId(this.rawId)
}

问题在于：this.$options.filters 是 Vue 2 的局部过滤器定义对象，它只供模板编译时使用，不暴露为可调用函数；而且即使存在，小程序平台也根本没注册过这些函数。

Vue 2 模式下，filters 是声明式语法糖，不是方法引用
Vue 3 / uni-app 3.x 已彻底移除 filters API，this.$options.filters 为 undefined
uni-app 小程序端不打包、不执行任何 filter 函数，真机调试时连 console.log 都不会触发

真正能“接收后立即处理”的做法：用工具函数 + 显式调用

把原来想塞进 filters 的逻辑，抽成纯函数，在 onLoad 里直接调用。这是唯一跨端稳定、可调试、可复用的方式。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

在 @/utils/filters.js 中导出函数：

export const formatId = (id) => {
  if (!id) return '未知ID'
  return `#${String(id).padStart(6, '0')}`
}

页面中导入并使用：

import { formatId } from '@/utils/filters'

export default {
  data() {
    return { formattedId: '' }
  },
  onLoad(options) {
    this.formattedId = formatId(options.id) // ✅ 立即生效，各端一致
  }
}

如果用 Composition API（setup），直接 import { formatId } 后调用即可，无需挂载

容易踩的坑：别在 `data()` 初始化时就调用过滤逻辑

比如这样写是危险的：

data() {
  return {
    // ❌ options 还没传进来，this.$route?.query.id 或 options.id 都是 undefined
    formattedId: formatId(this.$route?.query.id)
  }
}

结果就是 formattedId 初始值永远是 '未知ID'，后续也不会自动更新。正确做法是：

在 onLoad 或 onShow 中赋值（推荐）
用 watch 监听 options.id 变化（需配合 getCurrentPages() 获取当前页参数）
如果参数来自 URL query 且需响应式更新，用 computed 包一层，但必须确保依赖源已初始化，例如：
```
const currentPage = getCurrentPages().pop()
const options = currentPage?.options || {}
computed(() => formatId(options.id))
```

关键点始终只有一个：过滤逻辑必须由你主动调用，而不是指望框架在某个时机“自动触发”。所谓“立即处理”，本质是把转换动作从模板层下沉到数据初始化环节——这反而更可控、更容易加类型检查和单元测试。