526互联

vue-ref

发布时间 2023-08-25 17:25:00作者: huiyii

在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现，本文我们就来详细的介绍下这个内容

ref

ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，

如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，

如果是在子组件上，引用就指向组件的实例。还可以拿到子组件中的data和去调用子组件中的方法

$refs

$refs 是一个对象，持有已注册过 ref 的所有的子组件。

<template>
  <div id="app">
  // 注册
    <div ref="testDom">11111</div>
    <button @click="getTest">获取test节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    getTest() {
    // 获取注册的dom元素
      console.log(this.$refs.testDom)
    }
  }
};
</script>

参考文档 https://cloud.tencent.com/developer/article/1479575