脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → VUE2中$refs和ref属性的使用

VUE2语法中$refs和ref属性的使用方式

 更新时间：2025年10月13日 11:26:36   作者：雾林小妖  
在Vue中如何使用$refs和ref属性来操作DOM和组件实例,$refs是一个对象,包含由ref属性注册的DOM元素和组件实例,通过$refs可以在Vue中获取DOM节点、组件实例、组件数据和属性等

$refs和ref属性的使用

1、$refs:一个包含 DOM 元素和组件实例的对象，通过模板引用注册。

2、ref实际上获取元素的DOM节点

3、如果需要在Vue中操作DOM我们可以通过ref和$refs这两个来实现

总结：$refs可以获取被ref属性修饰的元素的相关信息。

$refs和ref使用-非组件环境

$refs f的使用至少需要写在mounted中，等待组件渲染结束，否则获取不到信息。

在下面的案例中，我们将template中的div加入属性ref=”comp2”,并打算在mounted中获取相关的DOM信息。

注意点：这是是没有使用组件的用法，后面有组件的用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app"></div>
  <script type="module">
    //实例化vue实例
    const { createApp } = Vue
    const app=createApp({
      mounted(){
        
      },
      template:`
      <div>
        <div ref="comp2" name="div111">hello vue</div>
      </div>
        `
    }); 
    //vue实例只作用于app这个DOM节点中
    app.mount('#app');//viewModel是组件帮助我们完成的
  </script> 
</body>
</html>

获取名称为comp2的ref节点

核心代码：this.$refs.comp2

mounted(){
        console.log(this.$refs.comp2)
},

获取名称为comp2节点中的值

核心代码：this.$refs.comp2.innerHTML

mounted(){
        console.log(this.$refs.comp2)
        console.log(this.$refs.comp2.innerHTML)
},

获取名称为comp2节点中属性的值

核心代码：this.$refs.comp2.attributes.name

mounted(){
        console.log(this.$refs)
        console.log(this.$refs.comp2.innerHTML)
      //获取属性name的值
        console.log(this.$refs.comp2.attributes.name)
      },

$refs和ref使用-组件环境

在vue中定义了一个全局组件component2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app"></div>
  <script type="module">
    //实例化vue实例
    const { createApp } = Vue
    const app=createApp({
      mounted(){
        console.log(this.$refs)
        console.log(this.$refs.comp2.innerHTML)
        console.log(this.$refs.comp2.attributes.name)

      },
      template:`
      <div>
        < component2 ref="comp" > </component2>
      </div>
        `
    }); 
    //定义一个全局组件
    app.component("component2",{
      methods:{
        event1(){
          console.log("======1======");
        }
      },
      data(){
        return {
          name:"晓春111"
        }
      },
      template:`<div name="div111">hello vue111111111</div> `
    });
    //vue实例只作用于app这个DOM节点中
    app.mount('#app');//viewModel是组件帮助我们完成的
  </script> 
</body>
</html>

获取到子组件comp的节点

核心代码：this.$refs.comp

mounted(){
   console.log(this.$refs.comp)
},

获取到子组件comp的节点中定义的函数

核心代码：this.$refs.comp.event1

mounted(){
        console.log(this.$refs.comp)
        console.log(this.$refs.comp.event1)
},

获取到子组件comp的节点data中定义的属性值

核心代码：this.$refs.comp.name

mounted(){
        console.log(this.$refs.comp)
        console.log(this.$refs.comp.event1)
        console.log(this.$refs.comp.name)
      },

获取到子组件comp的节点中template的值

核心代码：this.$refs.comp.$el

      mounted(){
        console.log(this.$refs.comp)
        console.log(this.$refs.comp.event1)
        console.log(this.$refs.comp.name)
        console.log(this.$refs.comp.$el)
      },

获取到子组件comp的节点中template中元素属性的值

核心代码：this.$refs.comp.$el.attributes.name

      mounted(){
        console.log(this.$refs.comp)
        console.log(this.$refs.comp.event1)
        console.log(this.$refs.comp.name)
        console.log(this.$refs.comp.$el)
        console.log(this.$refs.comp.$el.attributes.name)
      },

获取到子组件comp的节点中template中元素的值

核心代码：this.$refs.comp.$el.innerHTML

mounted(){
        console.log(this.$refs.comp)
        console.log(this.$refs.comp.event1)
        console.log(this.$refs.comp.name)
        console.log(this.$refs.comp.$el)
        console.log(this.$refs.comp.$el.attributes.name)
        console.log(this.$refs.comp.$el.innerHTML)
      },

获取到子组件comp的节点中template中元素的值

核心代码：this.$refs.comp.$data

$data能够获取我们定义在data中的参数。也就是

data(){
        return {
          name:"晓春111"
        } }

的值

 mounted(){
        console.log(this.$refs.comp)
        console.log(this.$refs.comp.event1)
        console.log(this.$refs.comp.name)
        console.log(this.$refs.comp.$el)
        console.log(this.$refs.comp.$el.attributes.name)
        console.log(this.$refs.comp.$el.innerHTML)
        console.log(this.$refs.comp.$data)
      },

获取子组件comp中template自定义属性

核心代码：this.$refs.comp.$options

  mounted(){
        console.log(this.$refs.comp)
        console.log(this.$refs.comp.event1)
        console.log(this.$refs.comp.name)
        console.log(this.$refs.comp.$el)
        console.log(this.$refs.comp.$el.attributes.name)
        console.log(this.$refs.comp.$el.innerHTML)
        console.log(this.$refs.comp.$data)
        console.log(this.$refs.comp.$options)
      },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue中使用jquery滑动到页面底部的实现方式

    vue中使用jquery滑动到页面底部的实现方式

    这篇文章主要介绍了vue中使用jquery滑动到页面底部的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • Uniapp 实现顶部标签页切换功能(详细步骤)

    Uniapp 实现顶部标签页切换功能(详细步骤)

    本文介绍了如何在UniApp中实现顶部标签页切换功能,u-tab-bar组件提供了便捷的标签切换功能和丰富的样式选项,而swiper组件则更加灵活,支持自定义切换方式,根据自己的需求选择合适的方式实现顶部标签页切换,感兴趣的朋友一起看看吧
    2025-02-02
  • vue实现关键字高亮效果的示例代码

    vue实现关键字高亮效果的示例代码

    这篇文章主要为大家详细介绍了如何使用vue实现关键字高亮效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-11-11
  • 使用Vant完成通知栏Notify的提示操作

    使用Vant完成通知栏Notify的提示操作

    这篇文章主要介绍了使用Vant完成通知栏Notify的提示操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue使用less报错:Inline JavaScript is not enabled问题

    vue使用less报错:Inline JavaScript is not ena

    这篇文章主要介绍了vue使用less报错:Inline JavaScript is not enabled问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 简单说说如何使用vue-router插件的方法

    简单说说如何使用vue-router插件的方法

    这篇文章主要介绍了如何使用vue-router插件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue项目中如何封装axios（统一管理http请求）

    Vue项目中如何封装axios（统一管理http请求）

    这篇文章主要给大家介绍了关于Vue项目中如何封装axios（统一管理http请求）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • vue组件中传值EventBus的使用及注意事项说明

    vue组件中传值EventBus的使用及注意事项说明

    这篇文章主要介绍了vue组件中传值EventBus的使用及注意事项说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

    详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

    本篇文章主要介绍了详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli），具有一定的参考价值，有需要的可以了解下
    2017-08-08
  • Vue.js 中的 v-show 指令及用法详解

    Vue.js 中的 v-show 指令及用法详解

    v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。这篇文章主要介绍了Vue.js 中的 v-show 指令及用法详解,需要的朋友可以参考下
    2018-11-11

最新评论