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对象的函数
Dec 22 Javascript
javascritp实现input输入框相关限制用法
Jun 29 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 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独立Session数据库存储操作类分享
2014/06/11 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
jquery写出PC端轮播图实例
2018/01/26 jQuery
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
python制作图片缩略图
2019/04/30 Python
python print出共轭复数的方法详解
2019/06/25 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
在线课程:Skillshare
2019/04/02 全球购物
入党现实表现材料
2014/12/23 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL