1 简介

　　在js中，我们获取一个元素可以通过document.getElementById()去获取，在vue中，使用了ref属性来替代id，通过ref属性可以获取html元素以及vue组件实例对象

　　它被用来给元素或子组件注册引用信息（ID的替代者）

　　该属性应用在html元素时，获取的是dom元素对象，如果应用在组件标签上，那么获取的是组件实例对象（vc）

2 使用方式

　　在标签添加ref属性即可

<h1 ref=“xxx”>ref</h1> 

<School ref=“xxx”></School>

　　通过组件实例的$ref属性可以获取

this.$refs.xxx

3 示例

1）main.js

//引入vue依赖

import Vue from 'vue'

//引入组件App

import App from './App.vue'

// 关闭生产提示

Vue.config.productionTip = false

//创建一个vue实例

new Vue({

  //这个目前还没学过，先知道他的作用是将app放入容器中。

  render: h => h(App),

  //配置该vue实例管理id为app的容器

}).$mount('#app')

2) app.vue

<template>

    <!-- 编写结构 -->

    <div>

    <!-- 分别使用id和ref -->

    <h1 ref="h1d">ref属性学习</h1>

    <h2 id="h2d">ref属性学习</h2>

    <hr>

    <school ref="schRef"></school>

    <school id="schId"></school>

    <button @click="showDom">打印dom</button>

    </div>

</template>

<script>

//引入school组件

import school from "./components/School.vue"

export default {

    components:{

        //注册组件

        school

    },

    methods:{

        showDom(){

            //根据id进行打印

            console.log(document.getElementById("h2d"));

            console.log(document.getElementById("schId"));

            //根据ref属性进行获取

            console.log(this.$refs.h1d);

            console.log(this.$refs.schRef);

        }

    }

}

</script>

<style>

</style>

3) school.vue

<template>

    <!-- 编写组件结构代码，也就是html代码 -->

    <!-- 需要一个div括住，也就是只能有一个根元素，一般使用div -->

    <div class="orange">

        <div>学校：{{schoolName}}</div>

        <div>地址：{{schoolAddress}}</div>

    </div>

</template>

<script>

//交互代码编写的地方，需要暴露出去给其他地方引入

//这个需要有一点es6模块化的知识，这里一般使用默认暴露，因为这是单文件组件，只需要暴露一个组件对象，

//并且引入默认暴露的组件引入语法比较简单。

export default {

    data() {

        return {

        schoolName:"尚硅谷",

        schoolAddress:"北京"

        }

    },

}

</script>

<style>

    /* 编写样式的地方 */

    .orange{

        background-color: orange;

    }

</style>

4) html.index

<!DOCTYPE html>

<html lang="">

  <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">

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    <title><%= htmlWebpackPlugin.options.title %></title>

  </head>

  <body>

    <noscript>

      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

    </noscript>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

5) 效果

两者获取html标签，获取到的都是html元素，通过原生js去获取组件标签，获取到的是组件最后在页面上的元素，而ref获取到的是组件实例对象。

Vue23 ref属性的更多相关文章

  1. spring中ref属性与<ref/>标签

    在bean的内部引用另一个bean对象: 使用ref标签对其进行引用: <ref bean="viewResolver2"/> <bean id="vi ...

  2. spring property标签中的 ref属性和ref 标签有什么不同？ 如下：<property name="a" ref="b" />

    spring property标签中的 ref属性和ref 标签有什么不同? 如下:<property name="a" ref="b" /> sp ...

  3. [转]spring property标签中的 ref属性和ref 标签有什么不同

    spring property标签中的 ref属性和ref 标签有什么不同? 如下:<property name="a" ref="b" /> sp ...

  4. Vue.js 源码分析(十) 基础篇 ref属性详解

    ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例,例如: ...

  5. Vue使用ref 属性来获取DOM

    注意,在父组件中可以使用this.$refs.属性名  获取任何元素的属性和方法,子组件不可以获取父组件中的 <!DOCTYPE html> <html lang="en& ...

  6. React Native中ref的用法（通过组件的ref属性，来获取真实的组件）

    ref是什么? ref是组件的特殊属性,组件被渲染后,指向组件的一个引用.可以通过组件的ref属性,来获取真实的组件.因为,组件并不是真正的DOM节点,而是存在于内存中的一种数据结构,称为虚拟的DOM ...

  7. ref属性

    ref属性 1.被用来给元素或组件注册引用信息(id的替代者) 2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 3.使用方式: 打标识:<h1 ref=& ...

  8. 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽

    今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...

  9. Vue ref属性 && props配置项

    1 // # ref属性: 2 // # 1.用来给元素或者子组件注册引用信息(id的替代者) 3 // # 2.应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象(vc) ...

  10. Vue学习之--------脚手架的分析、Ref属性、Props配置（2022/7/28）

    欢迎大家加入我的社区:http://t.csdn.cn/Q52km 社区中不定时发红包 文章目录 1.脚手架的分析 2.ref属性 2.1 基础知识 2.2 代码实现 2.3 测试效果 3.Props ...

随机推荐

  1. SQLSever视图和存储过程

    一.视图(View) 1. 为什么要学习视图? 在没有视图之前,我们都是写各种各样的SQL语句,有点,非常灵活.后面我们学习应用程序开发的时候,通过C#发送过来的SQL语句 到达数据库的时候,会执行什 ...

  2. 基于SqlSugar的开发框架循序渐进介绍（22）-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理

    在工作流页面中,除了特定的业务表单信息外,往往也需要同时展示通用申请单的相关信息,因此在页面设计的时候需要使用一些组件化的概念来实现动态的内容展示处理,本篇随笔介绍Vue3+TypeScript+El ...

  3. layui的button失效、layui绑定失效

    内容呢,就一句话. 因为不会报错,所以这个坑,找了半天......淦 button失效直接提交刷新可能是没加lay-submit 属性. <button class="layui-bt ...

  4. PGL图学习之图神经网络ERNIESage、UniMP进阶模型[系列八]

    PGL图学习之图神经网络ERNIESage.UniMP进阶模型[系列八] 原项目链接:fork一下即可:https://aistudio.baidu.com/aistudio/projectdetai ...

  5. 第2-4-8章 规则引擎Drools实战(1)-个人所得税计算器

    目录 9. Drools实战 9.1 个人所得税计算器 9.1.1 名词解释 9.1.2 计算规则 9.1.2.1 新税制主要有哪些变化? 9.1.2.2 资较高人员本次个税较少,可能到年底扣税增加? ...

  6. 安装mySql 出现 one more product requirements have not been satisified

    安装mySql 出现 one more product requirements have not been satisified 原因是缺少一些依赖环境. 在弹出的对话框中点击 否. 然后点击执行, ...

  7. 互联网最全cka真题解析-2022

    1.CKA真题解析kubectl自动补全及帮助信息1.配置kubectl自动补全apt install bash-completion source <(kubectl completion b ...

  8. bug处理记录:Error running 'WorkflowApplication': Command line is too long. Shorten command line for WorkflowApplication or also for Spring Boot default configuration?

    1.报错信息 Error running 'WorkflowApplication': Command line is too long. Shorten command line for Workf ...

  9. 不用USB，通过adb无线调试安卓手机页面

    以前真机调试手机页面,都是使用数据线连接手机和电脑,近日身边没有USB数据线,折腾了下如何不依赖数据线只用无线调试手机页面,教程如下. 本教程适用于安卓11以及以上版本.否则应该使用USB数据线连接. ...

  10. phpMyAdmin给非技术人员一个查阅数据库的窗口

    背景 管理数据库的界面工具. 开发团队中一般有非技术背景人员,比如: 产品,功能测试人员: 对他们来说,可能安装数据库管理工具客户端都很麻烦,需要一款在线的网页工具能方便他们查阅数据. 本地docke ...