4-2 Vue 父子组件的数据传递_vue 父组件向子组件传递数据-CSDN博客

本文链接：https://blog.csdn.net/xueerkeji/article/details/106292206

<!DOCTYPE html>
<html>
<head>
	<title>4-2 Vue 父子组件的数据传递</title>
	<script src="vue.js"></script>
</head>
<body>
	<!--
		1.通过属性转递数据
		2.单向数据流：父组件可以向子组件转递参数，但子组件不能修改父组件的内容
                  可以把父组件的值克隆到子组件里
        3.子组件向父组件传递值 emit：向外触发事件 然后需在template 监听该事件
	-->
	<div id="app">
		<!--count="0",转递的是字符串，:count="0",转递的是数字 因为加：就是js表达式-->
		<!--父组件通属性向子组件传递数据-->
		<counter :count="0" @change="handleIncreate"></counter>
        <counter :count="1" @change="handleIncreate"></counter>
        <div>{{total}}</div>
	</div>
	<script type="text/javascript">
		//定义一个局部组件
		var counter={
			//通过props接受你父组件传递的值 
			props:['count'],
			//将父组件的值克隆到子组件里this.count
			data:function(){
				return {
					number:this.count
				}
			},
			//局部组件自己的模板,并使用props变量
			template:'<div @click="handleClick">{{number}}</div>',
			methods:{
				handleClick:function(){
					//改变自己的值
					this.number+=2
                    this.$emit('change',2)
                    
				}
			}
		}
		var app = new Vue({
			el:'#app',
            data:{
                total:1
            },
			//注册局部组件，就可以使用了
			components:{
				counter:counter
			},
            methods:{
                handleIncreate:function(inc){
                    this.total+=inc
                }
            }
		})

		
	</script>
</body>
</html>