props
父级：
父级组件中引用子组件，并将自己data下面的giveChild数据绑定在 giveChildData 传给子
<myChild :giveChildData="giveChild">{{isMe}}</myChild>
data(){
return{
giveChild:‘222‘
}
},
components:{
myChild
}
子级：
通过props接收父级传来的数据
props:{
giveChildData:{
type:String
}
}
子组件将接收到的数据显示在自身模板中
<div>{{giveChildData}}</div>
效果：
$emit
子元素上的点击事件成功后，通过 $emit 将事件和数据发射出去
<div @click="sendChildData">点我将子的数据传给父级</div>
data(){
return{
childData:111
}
},
methods:{
sendChildData(){
this.$emit(‘sendChildData‘,this.childData)
}
}
父级：
父级接收到事件后，走自己的事件 getChildData并进行相关处理、显示。
<myChild :giveChildData="giveChild" @sendChildData="getChildData"></myChild>
<div>这是子级传过来的数据 ——> {{isMe}}</div>
data(){
return{
giveChild:‘222‘,
isMe:‘‘
}
},
methods:{
getChildData(data){
this.isMe = data;
}
},
components:{
myChild
}
效果：子把自己的childData传给了父级
原文：https://www.cnblogs.com/web-chuanfa/p/11151393.html