说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)

使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取

注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<style> </style>
</head>
<body>
<div id="vue_app">
<qinwm ref="vue_qinwm"></qinwm>
<p ref="vue_p">Hello, world!</p>
<button @click="getRef">getRef</button>
</div>
</body>
</html>
<script>
Vue.component("qinwm", {
template: `<h1>{{msg}}</h1>`,
data(){
return {
msg: "Hello, world!"
};
},
methods:{
func:function (){
console.log("Func!");
}
}
});
new Vue({
el: "#vue_app",
data(){
return {};
},
methods: {
getRef () {
console.log(this.$refs);
console.log(this.$refs.vue_p); // <p>Hello, world!</p>
console.log(this.$refs.vue_qinwm.msg); // Hello, world!
console.log(this.$refs.vue_qinwm.func); // func:function (){ console.log("Func!"); }
this.$refs.vue_qinwm.func(); // Func! }
}
});
</script>

Vue中$refs的用法的更多相关文章

  1. vue中$refs的用法及作用详解

    一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取do ...

  2. vue中$refs的使用

    vue中$refs获取组件或元素: 获取的元素就相当于是一个原生获取的元素,可以进行操作 this.$refs.ele.style.color = 'red

  3. vue & button & refs & click & bug

    vue & button & refs & click & bug $refs.btn.click() ??? vue & refs $refs.btn.$em ...

  4. Vue中directives的用法

    关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...

  5. Vue中mixin的用法

    在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的 ...

  6. Vue插件编写、用法详解(附demo)

    Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...

  7. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  8. Vue组件的继承用法

    Vue组件的继承用法 点击打开视频讲解 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜 ...

  9. vue中的一些用法,持续更新中......

    1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}) ...

随机推荐

  1. 数据库SQLITE3初识

    数据库DataBase,我们都没有接触过数据库,那么数据库是什么? 它是一个有结构的.集成的.可共享的统一管理的数据集合! 所谓有结构的,指的是数据是按一定的模型组织起来的. 简单的说,拿个箱子,用隔 ...

  2. [转]HTTP Error 502.5 - Process Failure asp.net core error in IIS

    本文转自:http://www.cnblogs.com/autohome7390/p/6840652.html 在windows server 2012 上安装完dotnet-win-x64.1.1. ...

  3. Mysql压缩版forWindows安装与配置

    参考:http://blog.csdn.net/wengengeng/article/details/52013650

  4. MySQL,Oracle,PostgreSQL,mongoDB 通过web方式管理维护, 提高开发及运维效率

    在开发及项目运维中,对数据库的操作大家目前都是使用客户端工具进行操作,例如MySQL的客户端工具navicat,Oracle的客户端工具 PL/SQL Developer, MSSQL的客户端工具查询 ...

  5. CODEFORCES 429B 动态规划

    http://codeforces.com/problemset/problem/429/B 可以参考这篇文章: http://blog.csdn.net/pure_lady/article/deta ...

  6. JS中数组和对象的区别

  7. [SHOI2007]园丁的烦恼

    裸的二维数点 #include"cstdio" #include"cstring" #include"iostream" #include& ...

  8. UOJ#55. 【WC2014】紫荆花之恋

    传送门 暴力思路就是每次点分治计算答案 点分治之后,条件可以变成 \(dis_i-r_i\le r_j-dis_j\) 每次只要查找 \(r_j-dis_j\) 的排名然后插入 \(dis_j-r_j ...

  9. Catalan数的通项公式(母函数推导)

    首先 \[h_n=\sum_{i}h_ih_{n-i-1}\] 写出 \(h\) 的母函数 \(H(x)\) 那么 \[H(x)=H^2(x)x+1,H(x)=\frac{1-\sqrt{1-4x}} ...

  10. AngularJS+RequireJs实现动态加载JS和页面的方案研究【中】

    3.动态加载的内容: home.js [html] view plain copy 在CODE上查看代码片派生到我的代码片 define(['app'], function(app) { app.co ...