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. K8Snode节点管理集群资源方法

    1.1 方法1 1.将master的admin.conf 文件拷贝到 node节点 [root@k8s-m ~]#scp /etc/kubernetes/admin.conf root@192.168 ...

  2. mysql 基础明细

    1.mysql 没有 TOP,用limit实现 2.mysql having 聚合之后,对组操作,和GROUP By搭配 mysql where  聚合之前,对表和视图操作 3.where 子句的作用 ...

  3. go cookie session

    https://astaxie.gitbooks.io/build-web-application-with-golang/content/zh/06.1.html

  4. 【深入浅出 Yarn 架构与实现】4-1 ResourceManager 功能概述

    前面几篇文章对 Yarn 基本架构.程序基础库.应用设计方法等进行了介绍.之后几篇将开始对 Yarn 核心组件进行剖析. ResourceManager(RM)是 Yarn 的核心管理服务,负责集群管 ...

  5. Linux下用rm误删除文件的三种恢复方法

    Linux下用rm误删除文件的三种恢复方法 对于rm,很多人都有惨痛的教训.我也遇到一次,一下午写的程序就被rm掉了,幸好只是一个文件,第二天很快又重新写了一遍.但是很多人可能就不像我这么幸运了.本文 ...

  6. 将 Vue.js 项目部署至静态网站托管,并开启 Gzip 压缩

    摘要:关于使用 Nginx 开启静态网站 Gzip 压缩的教程已经有很多了,但是好像没几个讲怎么在对象存储的静态网站中开启 Gzip 压缩.其实也不复杂,我们一起来看下~ 本文分享自华为云社区< ...

  7. 填坑日志-云网络智慧课堂双网卡Mac地址读取错误的问题及解决

    云网络智慧课堂的双网卡问题记录及解决方案 教师端 其实这里双网卡的问题一直没有解决,分为了两部分,一部分是教师端,一部分是学生端.症状类似,问题也类似,都是在设计之初因为硬件限制可能没有考虑到双网卡的 ...

  8. pymysql.err.ProgrammingError: (1146, "Table 'autoplatform.webcasestepinfo' doesn't exist"

    在使用jmeter调试接口时,提示pymysql.err.ProgrammingError: (1146, "Table 'autoplatform.webcasestepinfo' doe ...

  9. week_1

    Andrew Ng机器学习笔记---by OrangeStar Week 1 A computer program is said to learn from experience E with re ...

  10. day08-功能实现07

    家居网购项目实现07 以下皆为部分代码,详见 https://github.com/liyuelian/furniture_mall.git 16.功能15-会员显示登录名 16.1需求分析/图解 会 ...