注意,在父组件中可以使用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的更多相关文章

  1. Vue使用Ref跨层级获取组件实例

    目录 Vue使用Ref跨层级获取组件实例 示例介绍 文档目录结构 安装vue-ref 根组件自定义方法[使用provide和inject] 分别说明各个页面 结果 Vue使用Ref跨层级获取组件实例 ...

  2. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...

  3. 17、前端知识点--Vue中ref的使用

    methods里面的方法,需要手动触发才会执行. 如果想让页面一上来就执行的话,就需要写在mounted这个钩子函数中. <body> <div id="app" ...

  4. vue的数据双向绑定和ref获取dom节点

    vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...

  5. vue获取dom

    //使用ref属性来获取当前的div的dom属性 <div class="list" ref="wrapper"></div> //在j ...

  6. 第六章 组件 67 使用ref获取DOM元素和组件引用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. Vue.js自定义标签属性并获取属性,及绑定img的src属性的坑

    一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如< ...

  8. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  9. React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

随机推荐

  1. Fastjson 序列化与反序列化

    JSON这个类是fastjson API的入口,主要的功能都通过这个类提供. 序列化API // 将Java对象序列化为JSON字符串,支持各种各种Java基本类型和JavaBean public s ...

  2. LeetCode_326. Power of Three

    326. Power of Three Easy Given an integer, write a function to determine if it is a power of three. ...

  3. swift 修改 Navigationbar Tabbar 字体颜色背景等属性

    1.navigationBar的设置 let navColor = UIColor(red: 41/255, green: 160/255, blue: 230/255, alpha: 1) func ...

  4. Centos7网络连接

    参考链接:http://baijiahao.baidu.com/s?id=1597809303775176940(上面有些没说清楚,所以简化总结一丢丢) Step1 编辑 — 虚拟网络编辑器 — (管 ...

  5. Mysql 排序优化

    原文链接:https://www.cnblogs.com/moss_tan_jun/p/6021822.html https://blog.csdn.net/lb517290079/article/d ...

  6. cmake vs qmake

    qmake 是为 Qt 量身打造的,使用起来非常方便 cmake 使用上不如qmake简单直接,但复杂换来的是强大的功能 内置的 out-of source 构建.(目前QtCreator为qmake ...

  7. C++ 根据两点式方法求直线并求两条直线的交点

    Line.h #pragma once //Microsoft Visual Studio 2015 Enterprise //根据两点式方法求直线,并求两条直线的交点 #include"B ...

  8. 第五章 模块之 shtil 、 json / pickle、importlib、collections

    5.8 shtil 高级的 文件.文件夹.压缩包 处理模块 shutil.rmtree 删除目录 import shutilshutil.rmtree(path) shutil.move 重命名:移动 ...

  9. PAT(B) 1074 宇宙无敌加法器(Java)

    题目链接:1074 宇宙无敌加法器 (20 point(s)) 题目描述 地球人习惯使用十进制数,并且默认一个数字的每一位都是十进制的.而在 PAT 星人开挂的世界里,每个数字的每一位都是不同进制的, ...

  10. maven 打包成 .jar 文件执行:没有主清单属性错误

    报错原因是pom.xml配置文件中没有指定main入口信息,在pom.xml文件中添加如下代码: <build> <plugins> <plugin> <gr ...