Vue中$refs的用法详解


Posted in Javascript onJune 24, 2018

说明: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的用法详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大的!

Javascript 相关文章推荐
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
跟我学习javascript的this关键字
May 28 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
如何实现一个webpack模块解析器
Oct 24 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 #Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 #Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 #Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 #Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 #Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 #Javascript
vue中实现左右联动的效果
Jun 22 #Javascript
You might like
php中计算时间差的几种方法
2009/12/31 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Python中print函数简单使用总结
2019/08/05 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
pygame实现五子棋游戏
2019/10/29 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
运动会口号16字
2014/06/07 职场文书
党在我心中演讲稿
2014/09/02 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
高中教师个人工作总结
2015/02/10 职场文书
春秋淹城导游词
2015/02/11 职场文书
管理人员岗位职责
2015/02/14 职场文书
基层党建工作简报
2015/07/21 职场文书