第六章 组件 67 使用ref获取DOM元素和组件引用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
</head> <body>
<div id="app">
<input type="button" value="获取元素" @click="getElement" ref="mybtn">
<h3 id="myh3" ref="myh3">哈哈哈，今天天气太好了！！！</h3> <hr>
<login ref="mylogin"></login>
</div> <script> var login={
template:'<h1>登录组件</h1>',
data(){
return{
msg:'son msg'
}
},
methods:{
show(){
console.log('调用了子组件的方法')
}
}
} //创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
msg:''
},
methods:{
getElement(){
// console.log(document.getElementById('myh3').innerText) //ref 是英文单词 【reference】引用 referenceError
// console.log(this.$refs.myh3.innerText)
// console.log(this.$refs.mylogin.msg)
this.$refs.mylogin.show()
}
},
components:{
login
}
});
</script>
</body>
</html>
个人理解：相当于给你想要操作的DOM元素做过标记（ref），之后通过这个标记（ref）就可以获取DOM元素做相应的操作了，而不是通过操作DOM元素相关的API，比如document.getElementById()来获取DOM元素。
第六章 组件 67 使用ref获取DOM元素和组件引用的更多相关文章
- vue 使用ref获取DOM元素和组件引用
在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...
- Vue系列之 => ref获取DOM元素和组件
可以获取DOM元素,和组件中的数据,方法 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 20.Vue中获取DOM元素和组件
1.获取DOM元素和组件:this.$refs
- vue 组件传递值以及获取DOM元素的位置信息
1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...
- React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- Vue 获取dom元素之 ref 和 $refs 详解
一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
随机推荐
- C学习笔记-函数
函数的定义 返回值类型 函数名([[参数类型 参数名1],[参数类型 参数名2],···,[参数类型 参数n]]) { //执行语句 return 返回值; } 返回值类型:用于限定函数返回值的数据类 ...
- pynput模块—键盘鼠标操作和监听
pynput.mouse:包含控制和监控鼠标或者触摸板的类. pynput.keyboard:包含控制和监控键盘的类. 上面提到的子包都已被引入到pynput库中.要使用上面的子包,从pynput中引 ...
- Sliding Puzzle
On a 2x3 board, there are 5 tiles represented by the integers 1 through 5, and an empty square repre ...
- Linux 下使用 rar 进行压缩和解压缩
1. 下载安装文件 https://www.rarlab.com/download.htm 注意下载 64位的 2. 2019.8 时的下载命令为: wget https://www.rarlab. ...
- Photon Server初识(二) ---通过NHibernate 映射数据库
一.下载 NHibernate.dill 官网:https://nhibernate.info 或者通过NuGet下载(详情看上一节) 二.新建一个项目,并引入包 引入包 三.配置(重点) 1.配置x ...
- paramiko-ssh-实现操作记录查看
在paramiko源码包中的demos目录下-> vim interactive.py
- Python库的优雅安装及PyCharm虚拟环境配置
一.安装python库 安装python库有几种方式: 1. 使用pip命令行,如:pip install Pillow 2. 在pycharm中安装 3. 使用Anaconda批量安装常用模块 在使 ...
- HDU3622 Bomb Game(二分+2-SAT)
题意 给n对炸弹可以放置的位置(每个位置为一个二维平面上的点), 每次放置炸弹是时只能选择这一对中的其中一个点,每个炸弹爆炸 的范围半径都一样,控制爆炸的半径使得所有的爆炸范围都不相 交(可以相切), ...
- jenkins转换显示语言为中文简体（jenkins汉化）
jenkins版本2.117 单位使用的jenkins一直是英文版本,有同事建议切换为中文版. 以下过程完成转换. 一.安装插件 主界面-->系统管理-->插件管理-->可选插件 图 ...
- Struts2 流程原理
一.流程图 (转) 二.流程详解 1.服务器传递来的请求,通过ActionContextClearUp.other filters.最后到达StrutsPrepareAndExecuteFilter ...