Vue组件--父与子组件

最新推荐文章于 2023-12-01 20:32:51 发布

AsaZyf

最新推荐文章于 2023-12-01 20:32:51 发布

阅读量441

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue Vue组件文章标签： Vue Vue组件 Vue 父与子组件

本文链接：https://blog.youkuaiyun.com/AsaZyf/article/details/83586097

Vue 同时被 2 个专栏收录

50 篇文章

订阅专栏

Vue组件

11 篇文章

订阅专栏

本文通过一个实例，展示了在Vue中如何正确地在子组件内定义和使用data属性，以及如何通过自定义事件在父子组件间进行数据传递。重点讲解了子组件data属性为何必须为函数，以及如何响应点击事件并更新数据。

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

代码:

注意：子组件里面的data必须是函数

例子说明：每点击一次数字，加一，结果也跟着改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<count :num="3" @addincre="handClick"></count>
			<count :num="2" @addincre="handClick"></count>
			{{total}}
		</div>
		<script>
//		vuex
			Vue.component("count",{
				data(){
					return {
						numcount:this.num    //②定义
					}
				},
				props:["num"],  //①接收 
				//③使用
				template:"<div @click='add'>{{numcount}}</div>",
				methods:{
					add:function(){
//						alert(1)
						this.numcount = this.numcount+2
						this.$emit("addincre",2)
					}
				}
			})
		
			new Vue({
				el:"#app",
				data:{
					total:5
				},
				methods:{
					handClick:function(step){
						this.total = this.total+2
//						alert(step)
					}
				}
			})
		</script>
	</body>
</html>

效果：