详解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实现的省份级联实例代码
Jun 24 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
vant 中van-list的用法说明
Nov 11 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的正则处理函数总结分析
2008/06/20 PHP
PHP中常用数组处理方法实例分析
2008/08/30 PHP
劣质的PHP代码简化
2010/02/08 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
50个比较实用jQuery代码段
2011/09/18 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
python制作最美应用的爬虫
2015/10/28 Python
python命令行参数用法实例分析
2019/06/25 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
django 多数据库及分库实现方式
2020/04/01 Python
Python __slots__的使用方法
2020/11/15 Python
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
劳资专员岗位职责
2013/12/27 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
民事授权委托书范文
2014/08/02 职场文书
2014年度党员自我评议
2014/09/13 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js