14-ref属性

怼烎@ 2023-10-08 18:07 49阅读 0赞

## **ref属性** ##

ref属性被用来给元素或子组件注册引用信息（id的替代者），避免在vue中使用`document.getElementById`。

应用在html标签上时，获取的是真实dom元素；应用在组件标签上时，获取的是组件实例对象。

示例：

<template>
      <div id="app">
        
        <h1 v-text="msg" ref="title"></h1>
        <button ref="btn" @click="showDom">点我输出dom</button>
          
        
        <School ref="sch" />
      </div>
    </template>
    
    <script>
    import School from './components/School'
    
    export default {
        
      name: 'App',
      components: {
        
        School
      },
      data() {
        
        return {
        
          msg: 'hello'
        }
      },
      methods: {
        
        showDom() {
        
          // 使用this.$refs获取到当前组件配置的ref
          console.log(this.$refs); // 当前组件中所有的ref
          console.log(this.$refs.title);  // 获取到ref=title所在的dom元素
          console.log(this.$refs.sch);  // 获取到ref=sch对应的组件
        }
      },
    };
    </script>

**先赞后看，养成习惯！！！^ \_ ^ ❤️ ❤️ ❤️  
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！**

发表评论取消回复

表情：

评论列表（有 0 条评论，49人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue与ref属性与refs

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用...

谁借莪１个温暖的怀抱￠/ 2024年04月19日 09:06/ 0 赞/ 59 阅读

相关 Vue- ref属性

ref属性被用来给元素或者子组件注册引用信息（id的替代者）通过案例来演示\_ref属性 1 编写案例如图：有一个按钮，点击按钮可以输出dom元素备注

Love The Way You Lie/ 2023年10月12日 16:32/ 0 赞/ 30 阅读

相关 Vue- ref属性

ref属性被用来给元素或者子组件注册引用信息（id的替代者）通过案例来演示\_ref属性 1 编写案例如图：有一个按钮，点击按钮可以输出dom元素备注

待我称王封你为后i/ 2023年10月12日 14:33/ 0 赞/ 56 阅读

相关 14-ref属性

ref属性 ref属性被用来给元素或子组件注册引用信息（id的替代者），避免在vue中使用`document.getElementById`。应用在html标签上时，

怼烎@/ 2023年10月08日 18:07/ 0 赞/ 50 阅读

相关 reactjs ref属性：字符串类型的ref和createRef

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K

本是古典何须时尚/ 2023年10月01日 17:01/ 0 赞/ 16 阅读

相关 vue属性介绍（一）ref 与$refs的互生关系

文章目录场景介绍实例介绍 ref在实例中的应用 $refs在实例中的应用重要提醒场景介绍

傷城~/ 2023年05月30日 14:58/ 0 赞/ 18 阅读

相关 Vue中的$ref和$refs属性介绍与使用

除了自定义属性外，Vue实例还暴露一些有用的实例属性和方法，他们都有前缀$，以便和用户定义的属性和方法分开在Vue中一般很少会用到直接操作DOM，但不可避免有时

╰半夏微凉°/ 2022年11月04日 11:05/ 0 赞/ 257 阅读

相关 Vue与ref属性与refs

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息

- 日理万妓/ 2022年05月24日 11:04/ 0 赞/ 293 阅读

相关 react的ref属性

1.组件的三大属性之二：ref属性 (1)组件内的标签都可以定义ref属性来标识自己（２）在组件内可以通过this.refs.refName找到对应的真实DOM对象

逃离我推掉我的手/ 2022年05月15日 10:39/ 0 赞/ 309 阅读

相关实例属性ref的用法

一点睛 1 直接通过对象.的方式调用的属性，是来自于data或computed中的属性，但 vue 对象中的 el、data 等等这些键也称为属性，这些属性就是 Vue

墨蓝/ 2021年07月25日 02:58/ 0 赞/ 648 阅读