原生小程序不同页面调用同一子组件输入值串值
发布于 5 年前 作者 lijuan 5034 次浏览 来自 问答
  • 当前表现

1、写了个简单版的问题复现项目,结构如下:

总体由两个页面组成,一个是在tab bar中的页面index,一个是navigator跳转的页面page1。两个页面都共同调用了同一个子组件list。

其中index还调用了一个picker子组件。

2、list子组件input值共3个,分别为省份province,年份year,列表ID listid。

其中index使用到的输入值为province和year。page1使用到的输入值为listid。

因此index中listid值hardcode为-1值且没有变更的代码。

而page1中province和year值分别harcode为’’(空字符串)和0。

子组件写了个watch库,在属性setter中增加回调函数setData

运行表现:

1、编译后进入index页面,console.log中打印了list组件中的this.properties.listid值。当前值为-1

2、跳转到page1页面listid值打印未3

3、返回index页面,选择上部picker组件中选项后,触发index页面中list子组件的setter回调,打印listid为3而不是-1。

问题:

index和page1页面使用同一个子组件,两个页面的子组件不是应该相互独立存在的吗?为什么会page1中的值串进index子组件中?

demo源码:

复现代码

2 回复

两个页面的子组件不是应该相互独立存在的,组件内部状态是独立的,而目前小程序在data里面没有watch,你这个是vue的写法吧,你在最外部声明了一个com,这个com并不是被初始化成一个组件内部独立变量,可以类比成component里面的会被export出去然后new成一个实例,但是你的com这个并没有被export出去,仅仅是被实例引用,所以并不是独立的,Component那里面才会被独立成一个作用域。

回到顶部