14-ref属性

怼烎@ 2023-10-08 18:07 23阅读 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 条评论，23人围观）

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

相关阅读

相关 Vue与ref属性与refs

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

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

相关 reactjs组件实例三大属性之refs属性代码示例：回调函数形式的ref

该HTML页面通过使用React库和ReactDOM库来创建和渲染一个包含两个输入框和一个按钮的组件。点击按钮或失去焦点时，会弹出相应输入框的值。该页面使用了ref属性来获取输

朱雀/ 2024年02月17日 13:35/ 0 赞/ 36 阅读

相关 reactjs组件实例三大属性之refs属性代码示例：字符串形式的ref

该HTML页面通过引入React库和ReactDOM库来创建和渲染React组件。组件中包含两个输入框和两个按钮，点击按钮可以展示左侧输入框的值，失去焦点可以展示右侧输入框的值

我会带着你远行/ 2024年02月17日 13:35/ 0 赞/ 38 阅读

相关 Vue- ref属性

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

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

相关 Vue- ref属性

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

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

相关 14-ref属性

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

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

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

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

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

相关 Vue与ref属性与refs

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

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

相关 react的ref属性

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

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

相关实例属性ref的用法

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

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