vue父子组件传值

父子组件传值

父-子
父
1.在引入子组件的地方写 :parentData=“fromparent” 如下

<el-main><router-view  :parentData="fromparent"></router-view> </el-main>

2.return中定义

fromparent:'父组件传的值',

子
1.export default里和data同级的地方写props: [‘parentData’] 用于接收父组件的值
2.展示可以直接{{parentData}}

子-父
子（点击按钮向父传值）
1.html里写个按钮

<button @click="send">按钮</button>

2.return中定义

child:'子组件传的值',

3.methods里定义send事件

send () {
	this.$emit('fromChild', this.child)//用$emit传值给父组件
}

父
1.在引入子组件的地方写 @fromChild=“onFromChild” 如下

<el-main><router-view @fromChild="onFromChild" ></router-view> </el-main>

2.return中定义

fromChild:''

3.methods里定义onFromChild事件

onFromChild(data){
	this.fromChild=data   
}