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的AJAX用法
May 10 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
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
解析数组非数字键名引号的必要性
2013/08/09 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
linux下python抓屏实现方法
2015/05/22 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
学习十八大报告感言
2014/02/04 职场文书
区级文明单位申报材料
2014/05/15 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
利用Python实现Picgo图床工具
2021/11/23 Python