[vue3快速入门] 20.vue组件基础4——$refs的使用

这节课我们来讲一个特别的功能，$refs，一个小功能，但是在特定条件下用起来很方便
假设我们现在有一个计数器组件，autoCounter，在App.vue里使用了这个组件，
这个组件的计数初始化是不变的，在App.vue的mounted调用以后，我们的计数器再开始计数，

我们先写出来autoCounter组件的代码

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    startCount() {
      setInterval(() => {
        this.count++
      }, 1000)
    },
  },
}
</script>

<style></style>

我们看到autoCounter有个方法，startCount，只要调用这个方法，就可以开始计时，关键是我们在App.vue中，怎么调用autoCounter这个组件的方法，这时候就需要$refs出场了
首选我们在App.vue中使用autoCounter这个组件

<autoCounter></autoCounter>

然后给这个组件添加一个属性，ref，我们可以理解为用ref这个属性，给组件指定了一个id，我们这里叫myCounter吧

<autoCounter ref="myCounter"></autoCounter>

然后我们就可以通过ref的这个值myCounter，来获取组件的实例了
使用$refs这个属性来访问我们定义的ref，我们又看到它是$开头的，说明它是一个vue自带的属性

我们可以先打印一下$refs是什么内容

  mounted() {
    console.log(this.$refs)
  },

我们看到结果得到一个Proxy，如果你是初学者，不知道Proxy是什么，先不用着急，只要看到它里面有个对象myCounter，这是我们定义ref，说明我们获取到了autoCounter这个组件了
下面我们只要按照需求，3秒后，调用它的startCount方法就行了

  mounted() {
    setTimeout(() => {
      this.$refs.myCounter.startCount()
    }, 3000)
  },

这样页面加载好3秒后就开始计时了
这个例子是我们通过ref获取了自定义的vue组件的实例
在实际工作中，使用轮播图swiper这个插件的时候，很可能就会用到这个功能

ref还有一个用法，把它写在一个普通的html标签上，我们就可以获取这个html的dom元素，下面我们举个例子
我们的vue是以数据驱动的，不提倡获取dom，操作dom，但是有些内容是数据驱动能力之外的，比如我要获取一个元素的宽高，
我们继续在App.vue里增加一个span标签，给它一个ref属性，值是text

<span style="display: inline-block" ref="text">有一段文字</span>

然后在vue代码中，我们就可以通过$refs，获取这个span的dom
我们先来打印一下

  mounted() {
    // setTimeout(() => {
    //   this.$refs.myCounter.startCount()
    // }, 3000)
    console.log(this.$refs.text)
  },

结果

我们看到在控制台打印出了这个dom，说明我们成功获取到了，
然后我们就可以用元素的js，去获取元素的宽高了

  mounted() {
    // setTimeout(() => {
    //   this.$refs.myCounter.startCount()
    // }, 3000)
    console.log(
      '元素的宽度是：' + this.$refs.text.clientWidth,
      '元素的高度是：' + this.$refs.text.clientHeight
    )
  },

输出是

元素的宽度是：80 元素的高度是：21

这节课很简单，就是通过ref获取对象
1）如果ref用在自定义组件上，获取的是组件的实例
2）如果ref用在原生的html标签上，获取的是dom元素