项目应用场景

• 在做一个后台管理项目时，其中需要添加新的部门和编辑部门，弹窗是作为组件封装的，同时需要在弹窗的父组件中调用弹窗组件的一个方法，就使用了vue的ref属性获取弹窗组件的实列，然后在父组件中完成调用弹窗组件方法的动作

ref属性

1. 专门被用来给html元素和子组件注册引用信息的（id属性的替代者）
2. 该属性应用在html元素时，获取的是dom元素对象，如果应用在组件标签上，那么获取的是组件实例对象（vc）。

# 通过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>