详解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 相关文章推荐
JavaScript中的类继承
Nov 25 Javascript
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
js闭包的用途详解
Nov 09 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
js判断两个数组相等的5种方法
May 06 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 采集获取指定网址的内容
2010/01/05 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python使用tornado实现登录和登出
2018/07/28 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
python语言元素知识点详解
2019/05/15 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
项目管理计划书
2014/01/09 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
音乐教学反思
2014/02/02 职场文书
求职意向书
2014/04/01 职场文书
患者身份识别制度
2015/08/06 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python