vue的ref引用使用方法

最新推荐文章于 2025-07-14 00:11:30 发布

原创最新推荐文章于 2025-07-14 00:11:30 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

25 篇文章

订阅专栏

Vue

20 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单计数器组件案例。通过点击事件增加计数值，并利用$emit触发父组件的方法来更新总和。文章展示了如何定义Vue组件的数据和方法，以及组件间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="app">
       <counter ref="one" @change="handleChange"></counter>
       <counter ref="two" @change="handleChange"></counter>
       <div>{{total}}</div>
</div>

Vue.component("counter",{
           template: "<div @click='handleClick'>{{number}}</div>",
           //子组件定义data时，data不能为对象，必须是函数
           data: function() {
               return {
                   number: 0
               }
           },
           methods: {
               handleClick: function(){
                   this.number++,
                   this.$emit('change')
               }
           }
       })

       var vm = new Vue({
           el: "#app",
           data: {
               total: 0
           },
           methods: {
               handleChange: function() {
                   this.total = this.$refs.one.number + this.$refs.two.number
               }
           }
       })