Vue中 ref、$refs区别与使用

定义2个组件：

子组件ChildrenSubRef.vue：

 1 <template>
 2   <div>
 3
 4   </div>
 5 </template>
 6
 7 <script>
 8 export default {
 9   name: "ChildrenSubRef",
10   data() {
11     return {
12       data1: {
13         a: 111,
14         b: 222
15       },
16       data2: {
17         c: 333,
18         d: 444
19       }
20     }
21   },
22   methods: {
23     getSub1() {
24       return this.$data
25     },
26     getSub2() {
27       console.log('执行子组件方法 getSub2')
28     }
29   }
30 }
31 </script>

父组件ParentDemoRefs.vue：

 1 <template>
 2   <div>
 3     <h2 @click="getRefB">getRefB</h2>
 4     <h2 @click="getRefB_func">getRefB_func</h2>
 5     <h2 @click="getRefB_Data">getRefB_Data</h2>
 6     <div ref="refA">hello</div>
 7     <ChildrenSubRef ref="refB"/>
 8   </div>
 9 </template>
10
11 <script>
12 import ChildrenSubRef from "@/components/ChildrenSubRef.vue";
13
14 export default {
15   name: "ParentDemoRefs",
16   components: {
17     ChildrenSubRef
18   },
19   methods: {
20
21     getRefB() {
22       console.log(this.$refs.refB)
23     },
24     getRefB_func() {
25       this.$refs.refB.getSub2()
26     },
27     getRefB_Data() {
28       console.log(this.$refs.refB.getSub1())
29     }
30   }
31 };
32 </script>

ref：

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

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

1 <div ref="refA">hello</div>
2 <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提供了访问子组件的一种途径，可以根据实际开发需要使用