vue 学习（十）ref的用法

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

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







  1. <!DOCTYPE html>
    <html lang=”en”>
    <head>
        <meta charset=”UTF-8”>
        <title>Title</title>
        <script src=”vue.js”></script>
    </head>
    <body>
        <div id=”app”>
           <counter ref=”one” @recall=”recallMethod”></counter>
            <counter ref=”two” @recall=”recallMethod”></counter>

            <div>{
          {total}}</div>
        </div>

        <script>

            Vue.component(‘counter’,{
               template:’<div @click=”handleclick”>{
          {count}}</div>’,
                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
                    }
                }
            })
        </script>
    </body>
    </html>

发表评论

表情：
评论列表 （有 0 条评论，276人围观）

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

相关阅读

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

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

    男娘i男娘i/ 0 赞/ 131 阅读

    相关 react中ref的用法

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

    末蓝、末蓝、/ 0 赞/ 95 阅读

    相关 实例属性ref的用法

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

    墨蓝墨蓝/ 0 赞/ 707 阅读