vue-ref

在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

 

posted @ 2023-08-25 17:15  hjy1995  阅读(37)  评论(0编辑  收藏  举报