Vue父子组件传值

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

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

	<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>

 

posted @ 2019-04-13 15:05  我就是要叫鱼摆摆  阅读(129)  评论(0)    收藏  举报