vue 2 中 :prop="value | filter" 报错是因为管道符仅在 {{ }} 插值中合法，v-bind 绑定的是 js 表达式，而 value | filter 非法；应改用 computed 预处理或工具函数封装格式化逻辑。
不能在 props 绑定表达式里直接用过滤器（如 :value="raw | format"），Vue 2 的模板编译器不支持管道符出现在属性绑定中，会直接报错或静默失效。
为什么 :prop="value | filter" 会报错
Vue 2 模板语法中，| 管道符仅在双大括号插值 {{ }} 内合法；v-bind（即冒号）绑定的是 JS 表达式，而 value | filter 不是合法 JS 语法，编译阶段就失败。常见错误提示：Invalid expression 或控制台空白、组件不渲染。
正确做法：在父组件内提前处理好值
把过滤逻辑从模板移到 JS 层，确保传给子组件的 props 是已处理完毕的终态数据：
- 用
computed属性封装转换逻辑，再绑定到:prop上 - 在
data初始化或methods中调用工具函数处理，避免模板里写逻辑 - 如果多个地方复用，抽成
@/utils/filters.js中的纯函数，而非 Vue.filter —— 后者在小程序/App端根本无效
示例：computed: { formattedTitle() { return this.$filters?.formatText(this.rawTitle) || this.rawTitle } }
然后写 :title="formattedTitle"。
子组件接收时别再“二次过滤”
子组件拿到的 props 应该是最终可直接渲染的值，不要在子组件模板里又写 {{ title | formatText }} —— 这样既冗余，又可能因过滤器未注册或跨端失效导致白屏或空值。尤其注意：
- 若父组件用了全局
Vue.filter，子组件在小程序里收不到效果，但 H5 正常，容易漏测 - 子组件内部再调一次过滤器，等于对已格式化的字符串重复处理（比如日期转成字符串后又 new Date()，会失败）
- 如果传的是对象或数组，过滤器返回新引用，但
props是响应式只读的，子组件无法靠它触发更新
真正容易被忽略的是：开发者总想“在绑定那一刻顺手格式化”，但 uni-app 的跨端本质决定了——所有涉及平台差异、异步、副作用或运行时环境判断的逻辑，都不能塞进模板表达式。老老实实把转换提到 computed 或 setup 里，才是稳定可维护的做法。
