vue 学习（十）ref的用法

桃扇骨 2022-04-22 11:44 158阅读 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 条评论，158人围观）

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

相关阅读

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

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

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

相关 vue里ref ($refs)用法

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

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

相关 uni-app $refs的基本用法

$refs的基本用法一个对象(Object)，持有注册过 ref 特性的所有 DOM 元素和组件实例。 <template> <view cla

墨蓝/ 2022年11月13日 14:27/ 0 赞/ 557 阅读

相关 React Refs用法

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

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

相关 Vue中ref的用法

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

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

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

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

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

相关 Vue学习笔记（十四）——keep-alive标签用法

参考文档：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 本文主要介绍keep-alive标签的用

谁践踏了优雅/ 2022年02月14日 13:22/ 0 赞/ 176 阅读

相关 vue-ref-$refs用法

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

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

相关实例属性ref的用法

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

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

相关 React之ref详细用法

在react典型的数据流中，`props`传递是父子组件交互的唯一方式；通过传递一个新的`props`值来使子组件重新`re-render`,从而达到父子组件通信。当然，就像r

Love The Way You Lie/ 2021年06月24日 14:37/ 0 赞/ 534 阅读