第六章 组件 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 ...
随机推荐
- android带参和不带参的页面跳转形式
FActivity.java package com.example.demo06; import android.app.Activity;import android.content.Contex ...
- [转帖]yum与apt-get的区别以及两者更新源（阿里/网易【163】）
yum与apt-get的区别以及两者更新源(阿里/网易[163]) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/one_super_dreamer ...
- [转帖]docker容器保持运行不退出
docker容器保持运行不退出 2019年01月20日 23:21:22 chvalrous 阅读数 1511 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...
- SQL 查看某个表被哪些存储过程或者视图使用
--查询某个表被哪些视图/存储过程使用(type='P':表示存储过程,type='V':表示视图) SELECT OBJECT_NAME(id) FROM syscomments WHERE id ...
- shell基础篇
1. Shell概述 为什么要学习Shell呢? 1)需要看懂运维人员编写的Shell程序. 2)偶尔会编写一些简单Shell程序来管理集群.提高开发效率. 2 .Shell解析器 (1)Linux提 ...
- P1003铺地毯
这道题是2011年提高组第一题,在洛谷被评为普及-.看到题目后直接写了一个纯模拟,结果第一次提交全部RE,后将数组开大,随即MLE.然后又去思索其余方法,采用先将每一个地毯的对角线存下来,然后i--看 ...
- Mysql-Sqlalchemy-多表操作
import sqlalchemy from sqlalchemy import create_engine from sqlalchemy.ext.declarative import declar ...
- 【原创】大叔经验分享（68）maven工程查看jar包依赖
1 idea 结果 2 maven命令 $ mvn dependency:tree 结果 [INFO] +- org.springframework.boot:spring-boot-starter- ...
- js之语句(条件语句，循环语句，跳转语句)
一.条件语句 1.if语句 条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句,这些语句是代码是“决策点”有时称之为“分支”. if语句是一种基本的控制语句,它让Javascript程序可以选 ...
- mysql的decimal(10,0) not null问题
今天排查一个bug发现开发环境老是报错 order_num 字段insert的时候不能为空,但是发现测试环境没有这个问题. 后来发现测试环境有一个数据库docker安装的mysql 版本是5.7 而 ...