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 相关文章推荐
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
jQuery插件的写法分享
Jun 12 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
vue组件开发之slider组件使用详解
Aug 21 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
discuz7 phpMysql操作类
2009/06/21 PHP
php whois查询API制作方法
2011/06/23 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
python中的错误处理
2016/04/10 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
python3 线性回归验证方法
2019/07/09 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
小学信息技术教学反思
2014/02/10 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
客户付款通知书
2015/04/23 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers