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 ...
随机推荐
- Qt编写气体安全管理系统17-记录清理
一.前言 记录清理功能,在数据量很小的情况下,用不上,如果数据量大了的话,长年累月存储的,那就显得极其重要了,好比视频监控中的NVR存储的视频一样,一般来说存储个60天,那超过60天怎办呢,擦除早期的 ...
- 123457123456#0#----com.DoraGame.YingYu65--前拼后广--儿童英语doraX
com.DoraGame.YingYu65--前拼后广--儿童英语doraX
- 报错：Error starting Jetty. JSON Metrics may not be available.java.net.BindException:地址已在使用
报错背景: 刚在CDH中集成Flume插件,启动报错 报错现象: Error starting Jetty. JSON Metrics may not be available. java.net.B ...
- Django中的QuerySet查询优化之prefetch_related
转载的,做个笔记,原文链接 在数据库有外键的时候,使用 select_related() 和 prefetch_related() 可以很好的减少数据库请求的次数,从而提高性能.本文通过一个简单的例子 ...
- 在 ServiceModel 客户端配置部分中，找不到引用协定“WebServiceSoap”的默认终结点元素。这可能是因为未找到应用程序的配置文件，或者是因为客户端元素找不到与此协定匹配的终结点元素（转）
按语: 在项目中实现自动升级过程,在类库中调用webservice取升级update.xml文件,添加服务调用,但在类库中调用时就出现异常,但在简单的测试工程中没有问题.解决方法采用下面介绍的方法 在 ...
- Python - Django - ORM 一对一表结构
当一张表的某一些字段查询的比较频繁,另外一些字段查询的不是特别频繁,可以把不怎么常用的字段 单独拿出来做成一张表,然后用一对一的表关联起来 这样既保证数据都完整的保存下来,又能保证检索更快 model ...
- antd 用 customize-cra 方式引入 sass
antd 用 customize-cra 方式引入 sass 只需要安装:node-sass 即可
- PHP5.2\5.3 Xdebug 调试器配置及应用
PHP5.2添加的扩展方式:zend_extension_ts=D:\www\Server\php5\ext\php_xdebug-2.1.0-5.2-vc6.dll PHP5.3添加的扩展方式:ze ...
- 【JQuery插件】团购倒计时
案例截图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3. ...
- layui开关switch显示不全问题
先看效果: 开关显示不全,高度也不对称. 解决: 在所用到的html/jsp中自己加css .layui-form-switch { width: 52px; height: 23px; } 再看效果 ...