vue中ref属性的用法

一、ref属性简介

• 被用来给元素或子组件注册引用信息（ID的替代者）
• 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
• 用法：

• 1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
  2. 获取：```this.$refs.xxx```

二、通过ref实现事件的触发以及数据的更改（更改子组件数据）

        因为我们可以通过ref获取到组件的实例，所以我们能不能通过ref直接去修改子组件的数据和触发子组件的方法呢？答案是可以的。

//父组件中通过ref获取子组件的实例
<template>
  <div class="home">
    <h1>我是父组件<button @click="change">点我查看被ref标记的组价</button></h1>
    <HelloWorld ref="HelloWorld" />
  </div>
</template>

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

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  methods: {
    change() {
      console.log(this.$refs.HelloWorld);
    },
  },
};
</script>

输出组件实例：

拿到组件实例我们可以直接更改组件的数据，以及触发组件的方法

  methods: {
    change() {
      this.$refs.HelloWorld.num+=1,
      this.$refs.HelloWorld.Subcomponents()
    },