详解Vue的ref特性的使用


Posted in Javascript onJanuary 24, 2020

一、ref的基本使用

ref的使用
<!-- `vm.$refs.p`将会是DOM结点 -->
<p ref="p">hello</p>

<!-- `vm.$refs.child`将会是子组件实例 -->
<child-component ref="child"></child-component>

如果在普通的 DOM 元素上使用,引用指向的就是DOM 元素如果用在子组件上,引用就指向组件实例

深入理解$refs

某组件的$refs含有该组件的所有ref,看下面的例子

<div id="app">
  <p ref="p">hello</p>
  <child-component ref="child"></child-component>
</div>

<script>
Vue.component('child-component', {
  template: '<h1>child-component </h1>'
})

let vm = new Vue({
  el: '#app'
})
</script>

详解Vue的ref特性的使用

从上图中我们很容易发现
vm.$refs返回了一个对象,这个对象内有两个成员,包含了vm实例的所有ref
vm.$refs.p是DOM 元素
vm.$refs.child是组件实例

二、实战:通过ref获取子组件data

看下面的例子

<div id="app">
  <counter ref="child1" @change="handleChange"></counter>
  <counter ref="child2" @change="handleChange"></counter>
  <div>{{sum}}</div>
</div>

<script>
// counter组件,实现每点击一次,自增1
Vue.component('counter', {
  template: '<h3 @click="handleClick">{{count}}</h3>',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    handleClick() {
      this.count += 1;
      this.$emit('change')
    }
  }
})

let vm = new Vue({
  el: '#app',
  data: {
    sum: 0
  },
  methods: {
    handleChange() {
      this.sum = this.$refs.child1.count + this.$refs.child2.count // 使用refs获取子组件的数据
    }
  }
})
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS模拟多线程
Feb 07 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
javascript对象的相关操作小结
May 16 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
Javascript组合继承方法代码实例解析
Apr 02 Javascript
JavaScript对象原型链原理解析
Jan 22 #Javascript
Node.js学习之内置模块fs用法示例
Jan 22 #Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 #Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 #Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 #Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 #Javascript
JavaScript设计模型Iterator实例解析
Jan 22 #Javascript
You might like
转PHP手册及PHP编程标准
2006/12/17 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
深入理解js中this的用法
2016/05/28 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
小程序实现列表展开收起效果
2020/07/29 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
Python count函数使用方法实例解析
2020/03/23 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
餐饮管理自我介绍信
2014/01/15 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
公司司机岗位职责
2014/02/07 职场文书
毕业生自荐信格式
2014/03/07 职场文书
个人委托书怎么写
2014/04/04 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
幼师辞职信范文
2015/02/27 职场文书
入党个人总结范文
2015/03/02 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
总结Python使用过程中的bug
2021/06/18 Python