第六章 组件 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 ...
随机推荐
- 如何让FasterTransformer支持动态batch和动态sequence length
FasterTransformer 算子 nvidia在开源的FasterTransformer的代码中,提供tensorrt和tensorflow的自定义算子编译和py调用示例,详见FasterTr ...
- 通过火狐谋智查询API
谋智中文版网址 https://developer.mozilla.org 示例 site: developer.mozilla.org window 通过百度高级用法查API site: 网址 搜索 ...
- hdoj6446(树形DP)
题目链接:https://vjudge.net/problem/HDU-6446 题意:简化题意后就是求距离和的2*(n-1)!倍. 思路: 简单的树形dp,通过求每条边的贡献计算距离和,边(u,v) ...
- getBoundingClientRect()方法
是在<javascript高级程序设计>中看到了这个方法.getBoundingClientRect在IE5中就有,但似乎不怎么引起我们注意. 返回值:它返回一个clientRect对象, ...
- hadoop集群搭建及易踩坑收录
配置前先把域名映射配好哈 详情参考我的其他随笔(哪里不通可以在下方评论) 下载好hdfs.tar.gz 后 在/home/ldy下 mkdir apps/ tar -xzvf hdfs.tar.gz ...
- Spring系列三：IoC 与 DI
水晶帘动微风起,满架蔷薇一院香. 概述 在软件工程中,控制反转(IoC)是一种设计思想,对象之间耦合在一起,在运行时自动绑定,并且它们编译时对所需要引用的对象是不确定的.在这个spring教程中,通过 ...
- C++多线程基础学习笔记（九）
一.std::atomic续谈 上一章说到std::atomic是针对一个变量的,这里补充一下针对的变量操作一般是++,+=,--,&=等等运算 .以下这种不可取:a=a+1; 二.std:: ...
- one：arguments对象伪数组
这是我的第一个博客 <script> //计算N个数字的和 //定义一个函数,如果不确定用户是否传入了参数,或者说不知道用户传入了几个参数,没办法计算, // 但是如果在函数中知道了参数的 ...
- Elasticsearch多集群数据同步
有时多个Elasticsearch集群避免不了要同步数据,网上查找了下数据同步工具还挺多,比较常用的有:elasticserach-dump.elasticsearch-exporter.logsta ...
- C# 使用Emit实现动态AOP框架 进阶篇之优化
目 录 C# 使用Emit实现动态AOP框架 (一) C# 使用Emit实现动态AOP框架 (二) C# 使用Emit实现动态AOP框架 (三) C# 使用Emit实现动态AOP框架 进阶篇之异常处 ...