ref和$refs的应用 ref为元素设置一个标识 this.$refs获取dom元素 this.$refs获取组件元素

ref和$refs的应用

ref简介 作用

1. ref用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用
2. ref被用来给元素或子组件注册引用信息，说白了，就相当于为元素设置一个标识
3. 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
4. ref像元素的唯一标识，所以不要让其值重复
5. 每个 vue 的组件实例上，都包含一个$refs对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象

$refs获取dom元素

1. 在单文件组件中，我们可以通过this来调用$refs
2. $refs可以获取当前组件中所有注册过ref属性的元素，并返回一个对象，默认情况下它是一个空对象
3. 对象里面的成员都是注册过ref属性的dom元素，可以用来操作dom元素
4. 注意：$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。意味着你应该避免在模板或计算属性中访问$refs

<template>
  <div>
    <button @click="addColor">拿到dom元素 添加文字颜色</button>
    <p ref="myp">我的p标签</p>
    <span ref="myspan">我的span标签</span>
  </div>
</template>

<script>
export default {
  methods: {
    addColor() {
      console.log(this.$refs);
      this.$refs.myp.style.color = "red";
      this.$refs.myspan.style.color = "blue";
    },
  },
};
</script>

<style>
</style>

$refs获取组件元素

1. 如果想要使用ref引用页面上的组件实例，可以在使用组件的时候为组件设置ref标识
2. 这个时候通过this.$refs获取到的是当前设置了ref属性的组件，从而调用组件中定义的成员