收藏
回答

原生小程序不同页面调用同一子组件输入值串值

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 客户端 7.0.4 2.7.1

- 当前表现

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源码:

复现代码

最后一次编辑于  2019-06-04
回答关注问题邀请回答
收藏

2 个回答

  • 小程序社区开发-杰罗米
    小程序社区开发-杰罗米
    2019-06-05

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

    2019-06-05
    赞同
    回复 2
    • Liu.ZF🏁
      Liu.ZF🏁
      2019-06-05

      大致明白什么原因导致的。

      之前之所以将com这个component的引用写在外面,是因为写这个watch的时候,没办法解决callback的作用域问题。之前尝试过在setWatch中传入component的this,用bind或者call或者直接调用都没办法调用到component的method中方法。

      而如果是在page中做这个watch的话,上面的尝试是可以解决callback作用域问题的。

      另外还想咨询下,如果再component外面定义的com,作用域是全局还是?

      感谢!

      2019-06-05
      回复
    • 小程序社区开发-杰罗米
      小程序社区开发-杰罗米
      2019-06-05回复Liu.ZF🏁

      上面的尝试解决是解决了,那是因为作用域在,不是全局的,也是局部作用域,不然你在外部尝试访问看看就知道了。

      2019-06-05
      回复
  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    2019-06-03

    你好,麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    2019-06-03
    赞同
    回复 1
    • Liu.ZF🏁
      Liu.ZF🏁
      2019-06-04

      你好,已重新提交到正文,第一次使用。帮忙看下可以不?

      2019-06-04
      回复
登录 后发表内容