regularjs/regular

<r-component is={this.getComponetName()} ref="module-{"0"}"> 做组件切换时，不能更新 this.$refs['module-0'] 为新组件实例的引用

Closed this issue · 2 comments

ImHype commented

Template 代码

{#list modules as module}
    <r-component is={this.getComponetName()} ref="module-{module_index}"/>
{/list}

现象

组件切换时，生成了新的组件实例，并且替换了节点，但是 this.$refs["module-0”] 未更新为新组件实例

原因

我们来看下Regular 如何处理组件切换

...
this.$watch(is, function(value){
      // found the new component
      var Component = Constructor.component(value);
      if(!Component) throw new Error("component " + value + " has not registed!");
      var ncomponent = new Component(definition);
      var component = group.children.pop();
      group.push(ncomponent);
      ncomponent.$inject(combine.last(component), 'after')
      component.destroy();
      // @TODO  if component changed , we need update ref
      if(ref){
        self.$refs[ref] = ncomponent; // 未考虑 ref 未 表达式的情况
      }
    }, OPTIONS.SYNC);
})
...

所以，如果当 ref 为一个表达式时， self.$refs[ref] => self.$refs[ '[object object]']，不能更新他原本期望的 ref 引用

解决方式

 if(ref){
    self.$refs[ref.get? ref.get(this): ref] = ncomponent;
 }
fengzilong commented

Fixed in #162 PR has been merged ;-)

fengzilong commented

先等next分支合到master吧，点早了😥

  • 👍2