vue中组件通信----$refs使用及说明

作用一：通过$refs可以获取目标组件实例，从而获取改实例中的所有方法

用法：

 this.$refs.name

其中name表示目标组件名称，this表示当前组件

 

举例：在父组件中通过this.$refs.componentName as any获取到子组件RolegroupTab组件实例，从而获取到该实例的reloadRoleGroupTab方法

    changeCompont(name, data, type) {
  
      this.componentName = name;
      this.treeNode = data;

      if (name == 'RolegroupTab') {
        setTimeout(() => {
          (this.$refs.componentName as any).reloadRoleGroupTab();
        }, 0);
      } 
    }

作用二：ref作为dom标签属性时，可以通过$refs可以获取目标dom对象

 

总结：

1.如果在一个组件中想要获取另外一个组件中的方法，可以通过$refs[目标组件名].方法名获取到目标组件的实例

2.如果ref作为dom属性，想获取到ref所在dom节点对象可以通过$.refs.[ref属性名称]获取到对应的dom对象