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. golang实现一个简单的http代理

    代理是网络中的一项重要的功能,其功能就是代理网络用户去取得网络信息.形象的说:它是网络信息的中转站,对于客户端来说,代理扮演的是服务器的角色,接收请求报文,返回响应报文:对于web服务器来说,代理扮演 ...

  2. 打不开 github 的方法与推荐基于Vue3与Element plus的后台管理系统

    一.打不开 github 的方法 1.打开本机 hosts 文件(C:\Windows\System32\drivers\etc) 2.然后在 hosts 文件里的末尾放入一下两个 IP 地址: # ...

  3. zabbix-钉钉报警部署

    zabbix-钉钉报警部署 1. 流程说明 申请钉钉机器人 获取Webhook配置安全设置 获取钉钉号 使用脚本(shell/python)调用钉钉接口: python 输入收件人 信息 配置发件人 ...

  4. 周立功DTU+温度传感器，ZWS物联网平台尝试

    1.前言 了解到周立功有相关的物联网云平台,近期在调研动态环境监控项目,可以进行一个上云的尝试.购置了传感器.周立功的DTU等硬件,将传感器的温度.湿度等数据进行一个云平台的上传. 2.前期准备 传感 ...

  5. PP视频(PPTV聚力)web接口分析

    前言 前几天我想看一个番剧, 正好搜索到了 PP视频,我才知道PP视频就是PPTV聚力,我想把番剧下载下来,结果发现视频竟然不是m3u8格式,而是多段mp4,所以简单的写了个脚本,可以在不登录的情况下 ...

  6. easui datagrid 行获取后台sql所有数据：支持行chockbox多选，输出选中行任意属性；支持点击表中属性实现跳转；支持分页。

    easyUI datagrid 代码: <table id="tabgrid20170726191838251403" class="easyui-datagrid ...

  7. 【kafka】JDBC connector进行表数据增量同步过程中的源表与目标表时间不一致问题解决

    〇.参考资料 一.现象 1.Oracle源表数据 2.PG同步后的表数据 3.现象 时间不一致,差了8个小时 4.查看对应的connector信息 (1)source { "connecto ...

  8. 使用Spring Reactor优化推荐流程

    1. 背景 公司有一个推荐系统Rec,这个系统的主要功能是: 向外部系统提供推荐接口 根据请求获取推荐策略 根据推荐策略完成推荐的召回.过滤.打分.排序阶段 Rec作为微服务中的一环,本身不存储召回的 ...

  9. 动手实验查看MySQL索引的B+树的高度

    一:文中几个概念 h:统称索引的高度: h1:主键索引的高度: h2:辅助索引的高度: k:非叶子节点扇区个数. 二:索引结构 叶子节点其实是双向链表,而叶子节点内的行数据是单向链表,该图未体现. 磁 ...

  10. Jmeter 之提取多个值并引用

    一.数值的提取 1.使用Json提取器随机提取返回结果中某几个值 2.使用Json提取器指定提取返回结果中的某几个值,如下,指定提取records中第一条数据中的flowType.id值 3.使用正则 ...