详解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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
javascript调试说明
Jun 07 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
浅谈JavaScript字符集
May 22 Javascript
js 操作符汇总
Nov 08 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 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输出Excel文件类
2010/02/08 PHP
php中socket通信机制实例详解
2015/01/03 PHP
php简单生成随机数的方法
2015/07/30 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
js+css实现打字效果
2020/06/24 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
Python实现简单状态框架的方法
2015/03/19 Python
python实现备份目录的方法
2015/08/03 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
python groupby 函数 as_index详解
2019/12/16 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
python中元组的用法整理
2020/06/15 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
秘书英文求职信范文
2014/01/31 职场文书
环境日宣传活动总结
2014/07/09 职场文书
2014和解协议书范文
2014/09/15 职场文书
2015年党性分析材料
2014/12/19 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python