Vue中 ref、$refs区别与使用

 

 

定义2个组件：

子组件ChildrenSubRef.vue：

<template>
  <div>
    
  </div>
</template>

<script>
export default {
  name: "ChildrenSubRef",
  data() {
    return {
      data1: {
        a: 111,
        b: 222
      },
      data2: {
        c: 333,
        d: 444
      }
    }
  },
  methods: {
    getSub1() {
      return this.$data
    },
    getSub2() {
      console.log('执行子组件方法 getSub2')
    }
  }
}
</script>

父组件ParentDemoRefs.vue：

<template>
  <div>
    <h2 @click="getRefB">getRefB</h2>
    <h2 @click="getRefB_func">getRefB_func</h2>
    <h2 @click="getRefB_Data">getRefB_Data</h2>
    <div ref="refA">hello</div>
    <ChildrenSubRef ref="refB"/>
  </div>
</template>

<script>
import ChildrenSubRef from "@/components/ChildrenSubRef.vue";

export default {
  name: "ParentDemoRefs",
  components: {
    ChildrenSubRef
  },
  methods: {

    getRefB() {
      console.log(this.$refs.refB)
    },
    getRefB_func() {
      this.$refs.refB.getSub2()
    },
    getRefB_Data() {
      console.log(this.$refs.refB.getSub1())
    }
  }
};
</script>

ref：

我们可以给任意dom或组件附加上ref属性

像这样，只需要在标签上机上属性ref即可，名字可DIY

<div ref="refA">hello</div>
<ChildrenSubRef ref="refB"/>

$refs:

上面定义的一个或多个含有ref属性的dom元素或组件，在当前组件实例化后会将它们写入组件实例的属性$refs,$refs是一个集合，

页面有一个ref就有一个元素在里面，而实际上$refs里的每个ref都指向它的实例

访问this.$refs.refA 就可以访问到这个refA所在的dom：

<div>hello</div>

访问this.$refs.refB 就可以访问到这个refB所在的Vue组件实例：

  

在父组件能拿到子组件的实例，就像在子组件中访问子组件实例一样，那就明白ref能干嘛了

可以在父组件访问子组件的数据或方法：

执行子组件方法：

this.$refs.refB.getSub1()

由此看来，$refs提供了访问子组件的一种途径，可以根据实际开发需要使用