这篇文章主要介绍了详解Vue的ref特性的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、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>

从上图中我们很容易发现
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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
你比你的爷爷,或许多了一条动脉

你比你的爷爷,或许多了

最近100多年来,很多人多长出了一条血管。
宇宙中最极端的恒星

宇宙中最极端的恒星

这就是大多数恒星瑰丽的一生。但是就像人一样,有些恒星
苹果iPhone 12/12 Pro今日开售:“Pro”款黄牛加价3000元

苹果iPhone 12/12 Pro

苹果iPhone 12和iPhone 12 Pro两款产品今天正式开卖,与
华强北经销商:iPhone12线下提价800-2000元

华强北经销商:iPhone12

华强北某经销商告诉财联社记者,今日线下销售iPhone新品
小米的T字生态:它的下一个十年应该看什么?

小米的T字生态:它的下

一切过往,皆为章序,小米的下一个十年应该看什么?
我们的遗传基因多大程度地限制了自主意识?

我们的遗传基因多大程

最新研究揭示人类行为很大程度上受到基因的影响,现在我
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,