关于Vue中的ref和$refs 用法

首先最常用的就是父子之间的传值：父组件调用子组件的方法，$refs，
父组件：

<template>
 <div id="app">
 <!--用ref给子组件起个名字-->
 <child-a ref="child"></child-a>
  <button @click="getMyEvent">点击父组件</button>
 </div>
</template>
<script>
 data() {
   
  return {
   
  msg: "我是父组件"
  }
 },
 methods: {
   
  getMyEvent(){
   
   this.$refs.child.emitEvent(this.msg);
   //调用子组件的方法，child是上边ref起的名字，emitEvent是子组件的方法。
  }
 }
 }
</script>

子组件：

<template>
 <button>点击我</button>
</template>
<script>
 export default {
   
 methods: {
   
  emitEvent(msg){
   
  console.log('接收的数据：'+msg)//接收的数据：我是父组件
  }
 }
 }
</script>

除些之外下面是ref和$refs的几种常见用法

1、当ref用在组件上时，通过$refs获取的是该组件的实例，可进而调用组件内定义的方法、属性等，通常我们可以通过这种方式来调用某个组件内的methods、data中定义的数据、或是进而获取其子组件等

<template>
  <div id="app">
    <Home ref="test" />
  </div>
</template>

<script>
import Home from './views/Home'
export default {
   
  components: