详细问题描述
无法在业务逻辑类中定义自己的方法或者只读字段;
[内容]
我稍微分析了一下编译为微信小程序的逻辑,发现在 页面和页面内组件的 prop 传递参数时,
使用的是 JSON序列化 和 反序列化形式,这就使得无法序列化的对象(例如方法或者只读字段)在传递过程中丢失
(具体参见 mp.runtime.esm.js 中
3891行 _update方法 ==》5563行的 patch方法, ===》以及第 5550行的 cloneWithData 方法 (这儿使用 json序列化 和 反序列化 了))
[步骤]
- vue create -p dcloudio/uni-preset-vue my-project 选择 ts 创建基于 ts 的 uni-app 项目
- 创建文件 Person.ts
export default class Person {
/**
*
*/
constructor(public name: string) {
}
/**
*通过只读字段获取 name, 用于演示
*/
get nameInGet(): string {
console.log('准备通过 get 去获取 name');
return this.name;
}
}
- 创建组件 Comp.vue
<template>
<view>
<view>{{person.name}}-11</view>
<view>{{person.nameInGet}}--11</view>
</view>
</template>
<script lang="ts">
export default {
props: {
person: {
required: true,
type: Object,
default: ()=>{}
},
}
}
</script>
- 修改入口页面 index.vue
<template>
<view class="content">
<Comp :person='person'></Comp>
</view>
</template>
<script lang="ts">
import Vue from 'vue';
import Person from './Person';
import Comp from './Comp.vue';
export default Vue.extend({
data() {
return {
person: new Person("Wang")
}
},
components: {
Comp,
}
});
</script>
[结果]
Wang-11
undefined--11
[期望]
Wang-11
Wang-11
IDE运行环境说明
HBuilder X
[IDE版本号] 2.2.2.20190816
[windows版本号] Windows 10
uni-app运行环境说明
[运行端是h5或app或某个小程序?] 微信小程序
[运行端版本号] 微信开发者工具 stable v1.02.1907300
[项目是cli创建的还是HBuilderX创建的?Cli 创建
[编译模式是老模板模式还是新的自定义组件模式?] 新的自定义组件模式
附件
联系方式
[QQ]