Vue中ref的使用

最新推荐文章于 2024-05-16 08:55:13 发布

就是我咯

最新推荐文章于 2024-05-16 08:55:13 发布

阅读量384

点赞数

文章标签：用ref求和

本文链接：https://blog.csdn.net/qq_38859502/article/details/82289952

版权


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中ref的使用（demo-计数器）</title>
</head>
<body>
    <script src="https://vuejs.org/js/vue.js"></script>
    <div id="app">
        数一：<counter @qiuhe="handleQiuHe" ref="one"></counter>
        数二：<counter @qiuhe="handleQiuHe" ref="two"></counter>
        <div>求和:{{total}}</div>
    </div>
    <script>
        // 创建全局组件
        Vue.component('counter',{
            template:'<div  @click="add">{{counter}}</div>',
            data:function(){
                return {
                    counter:0,
                }
            },
            methods:{
                add:function(){
                    this.counter++
                    this.$emit("qiuhe")
                }
            }
        })
       var vm=new Vue({
           el:'#app',
           data:{
               total:0
           },
           methods:{
            handleQiuHe(){
                this.total=this.$refs.one.counter+this.$refs.two.counter
            }
           },
       })
    </script>
</body>
</html>

就是我咯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中ref的使用

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫