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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
IE8 浏览器Cookie的处理
Jan 31 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 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
Session的工作方式
2006/10/09 PHP
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
2014过年倒计时示例
2014/01/31 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
学Python 3的理由和必要性
2019/11/19 Python
Python socket聊天脚本代码实例
2020/01/02 Python
python logging通过json文件配置的步骤
2020/04/27 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
一套PHP的笔试题
2013/05/31 面试题
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
转党组织关系介绍信
2014/01/08 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
孔庙导游词
2015/02/04 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
Python  lambda匿名函数和三元运算符
2022/04/19 Python
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers