Vue使用ref 属性来获取DOM
注意，在父组件中可以使用this.$refs.属性名 获取任何元素的属性和方法，子组件不可以获取父组件中的
<!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>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div class="app">
<input type="button" @click="show" value="点击">
<!-- 设置元素ref 属性 -->
<h1 ref="chuandi">中国是伟大的祖国</h1>
<hr>
<log ref="mylog"></log>
</div> <template id="log">
<div>
<input type="button" value="获取元素" @click="comfunc">
<h1>你说的很对啊</h1>
</div>
</template> <script>
var vm=new Vue({
el:'.app',
data:{},
methods: {
show(){
// 获取ref属性为chuandi的内部文本
console.log(this.$refs.chuandi.innerText); //获取到了h1 元素的文本
console.log(this.$refs.mylog.name); //获取到了子组件的data属性
console.log(this.$refs.mylog.add); //获取到了子组件的方法 }
}, components:{
log:{
template:'#log',
data(){
return{
name:'duwei'
}
},
methods: {
add(){ console.log('调用了子组件的方法'); },
comfunc(){
console.log(this.$refs.chuandi.innerText); //报错 innerText没有定义， 子组件不能通过ref 来获取父组件的属性方法
// 需要使用props }
},
} }
})
</script>
</body>
</html>
Vue使用ref 属性来获取DOM的更多相关文章
- Vue使用Ref跨层级获取组件实例
目录 Vue使用Ref跨层级获取组件实例 示例介绍 文档目录结构 安装vue-ref 根组件自定义方法[使用provide和inject] 分别说明各个页面 结果 Vue使用Ref跨层级获取组件实例 ...
- vue 组件传递值以及获取DOM元素的位置信息
1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...
- 17、前端知识点--Vue中ref的使用
methods里面的方法,需要手动触发才会执行. 如果想让页面一上来就执行的话,就需要写在mounted这个钩子函数中. <body> <div id="app" ...
- vue的数据双向绑定和ref获取dom节点
vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...
- vue获取dom
//使用ref属性来获取当前的div的dom属性 <div class="list" ref="wrapper"></div> //在j ...
- 第六章 组件 67 使用ref获取DOM元素和组件引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue.js自定义标签属性并获取属性，及绑定img的src属性的坑
一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如< ...
- vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
随机推荐
- Spring cloud微服务安全实战-4-4 OAuth2协议与微服务安全
Oauth2 解决了cookie和session的问题 搭建认证服务器 把依赖都复制进来 因为搭建的是Oauth的服务器,所以还需要导入oauth2 开始写代码 首先创建启动类 增加配置文件 端口设置 ...
- matlab基本函数sort
一起来学演化计算-matlab基本函数sort 觉得有用的话,欢迎一起讨论相互学习~Follow Me sort 对数组元素排序 语法 B = sort(A) 按照大小不等于1的第一个数组维度对A的元 ...
- 报错：(未解决)java.lang.VerifyError: Instruction type does not match stack map
报错背景: CDH中集成kafka的服务,解决完kafka的jar包报错之后重启,发现这个报错. 报错现象: java.lang.VerifyError: Instruction type does ...
- Delphi 中使用计算出的字段
在很多情况下,我们需要的数据与数据库中其它字段的数据相关,例如订单的金额为数量与单价的乘积.在应用程序中,若要在显示订单具体条目的同时显示金额,通常要创建一个字段,在显示该字段之前先进行乘法运算,将金 ...
- LODOP打印table超宽用省略号带'-'的内容换行问题
前面的博文有div超宽隐藏(LODOP打印超过后隐藏内容样式),还有有table设置超宽隐藏(),此外,还有超宽后用省略号表示的css样式,此文是针对这个样式的.该样式正常情况下没问题,但是遇到-短线 ...
- css样式圆角和一定的透明度
css样式里可以用border-radius把div或图片变成带有一定圆角的,如果是div本身是正方形,设置圆角度是百分之五十,就是圆形. border-radius:值可以是具体的px数值,也可以是 ...
- Java学习，从入门到放弃（二）Linux配置mvn
其实网上的教程很多,随便拿一个,比如:https://www.cnblogs.com/chuijingjing/p/10430649.html 但在实践过程中,发现可能需要将JAVA_HOME也加到 ...
- mysql 中不等于过滤 null 的问题（同时比较等于，大于和小于）
在写 SQL 条件语句是经常用到 不等于'!='的筛选条件,此时要注意此条件会将字段为 null 的数据也当做满足不等于的条件而将数据筛选掉. 1.原始数据和表结构 CREATE TABLE `tes ...
- Actor模型的状态（State）+行为（Behavior）+邮箱（Mailbox）
状态(State)+行为(Behavior)+邮箱(Mailbox) 基于Actor模型的CQRS.ES解决方案分享 开场白 大家晚上好,我是郑承良,跟大家分享的话题是<基于Actor模型的CQ ...
- mui弹出二维码示例
<div id="tap_popover" class="box mui-popover mui-popover-action mui-popover-bottom ...