计数器ref组件功能

最新推荐文章于 2024-05-03 17:36:34 发布

Akita·wang

最新推荐文章于 2024-05-03 17:36:34 发布

阅读量160

点赞数

分类专栏： vue.js框架

本文链接：https://blog.csdn.net/qq_19168521/article/details/80918606

版权

vue.js框架专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这篇博客通过一个简单的HTML页面展示了如何使用Vue.js创建并使用`counter`组件。组件通过`ref`属性被引用，当点击时触发`handleClick`方法增加计数值，并通过`@change`事件通知父组件更新总和。父组件中，`total`变量由两个`counter`组件的数值相加得出。

摘要由CSDN通过智能技术生成

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>

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

<script>

Vue.component('counter',{
template:'<div @click="handleClick">{{number}}</div>',
data:function(){
return {
number:0
}
},
methods:{
handleClick:function(){
this.number++ ;
this.$emit('change');
}
}

})

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

})
</script>
</body>
</html>