Vue父子组件传值

父组件通过属性向子组件传值

指定el中，用过:count="0"进行向子组件传值

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

	<counter :count="0" @change="chan" ref="one"></counter>

在子组件中，获取到父组件的值，要使用它的数据，不能直接修改，因为是单项数据流，直接修改会影响其他人接受数据的

所以，我们就要找个东西复制代替他，在data里面声明；

当子组件向父组件传值的时候

调用$emit.("函数名",参数)，向父组件传

var counter={
				props:['count'],
				data:function(){
					return{
						number:this.count
					}	
				},
				template:`<div @click="act">{{number}}</div>`,
				methods:{
					act:function(){
						//子组件不能修改父组件传来的数据，单项数据流，如果要修改，就要找个东西复制代替他
						this.number++;
						//子组件通过事件触发的方式向父组件传值
						this.$emit('change',1)	
					}
				}
				
			}

　　父组件的@change="chan"的事件就会被激活

methods:{
		 chan:function(value){
	this.total=this.$refs.one.number+this.$refs.two.number
			}
		}

　　

 

 

,每次这样激活父组件的函数都是从子组件响应上来很麻烦，

还有个更简单的方法加   .native  就行了

<child @click.native="handle"></child>

 

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄