vue 学习（十）ref的用法

桃扇骨 2022-04-22 11:44 199阅读 0赞

1，例子是一个计数器，就是求两个数之和

<table> 
 <tbody> 
  <tr> 
   <td> <pre>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
       &lt;counter ref="one" @recall="recallMethod"&gt;&lt;/counter&gt;
        &lt;counter ref="two" @recall="recallMethod"&gt;&lt;/counter&gt;

&lt;div&gt;{
      {total}}&lt;/div&gt;
    &lt;/div&gt;

&lt;script&gt;

Vue.component('counter',{
           template:'&lt;div @click="handleclick"&gt;{
      {count}}&lt;/div&gt;',
            data:function () {
                return {
                    count:0
                }
            },
            methods:{
                handleclick:function () {
                    this.count++;
                    this.$emit('recall')
                }
            }
        })

var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                total:0
            },
            methods:{
                recallMethod:function () {
                  this.total=this.$refs.one.count+this.$refs.two.count
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre> </td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue学习笔记：ref和$refs的使用

ue中有一个特殊的属性ref，可以给每一个标签使用，用来获取标签的元素，和jquery中给标签添加一个class或者id，然后在获取这个标签的元素一样，每一个标签可以根据...

男娘i/ 2024年04月17日 05:30/ 0 赞/ 66 阅读

相关 react中ref的用法

ref 的由来在典型的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的 props 来重新渲染它。但是，在某些情况下

末蓝、/ 2023年10月06日 15:13/ 0 赞/ 15 阅读

相关 vue3 ref 理解与用法

1. ref ref和[reactive][]一样,也是用来实现[响应式数据][reactive]的方法 2.本质 ref底层其实还是reactive,所以当运行时系统

末蓝、/ 2023年09月29日 11:42/ 0 赞/ 6 阅读

相关 vue里ref ($refs)用法

ref 有三种用法：　　1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素　　2、ref 加在子组件上，用this.ref.name 获取

港控/mmm°/ 2023年02月09日 10:29/ 0 赞/ 15 阅读

相关 vue里ref ($refs)用法

在项目里经常用到ref操作DOM元素或者调用子组件的方法（啥也不知道，啥都敢用），但是并不明确ref的原理，通过看官网API和各位大佬的总结终于get啦啦！！做个记录。 >

「爱情、让人受尽委屈。」/ 2022年11月20日 09:44/ 0 赞/ 281 阅读

相关 React Refs用法

Refs介绍 -------------------- Refs提供了一种访问在render方法中创建的DOM节点或者React元素的方法。在典型的数据流中，props

快来打我*/ 2022年05月26日 04:59/ 0 赞/ 261 阅读

相关 Vue中ref的用法

基本用法 <div id="app"> <input type="text" ref="input1"/> <button @click="add">添加

比眉伴天荒/ 2022年05月18日 05:00/ 0 赞/ 312 阅读

相关 vue 学习（十）ref的用法

1，例子是一个计数器，就是求两个数之和 <table> <tbody> <tr> <td> <pre><!DOCTYPE html> <h

桃扇骨/ 2022年04月22日 11:44/ 0 赞/ 200 阅读

相关 vue-ref-$refs用法

[vue $refs的基本用法][vue _refs] <div id="app"> <input type="text" ref="input1

梦里梦外;/ 2021年10月09日 03:36/ 0 赞/ 392 阅读

相关实例属性ref的用法

一点睛 1 直接通过对象.的方式调用的属性，是来自于data或computed中的属性，但 vue 对象中的 el、data 等等这些键也称为属性，这些属性就是 Vue

墨蓝/ 2021年07月25日 02:58/ 0 赞/ 624 阅读