App.vue
<template>
<div>
<Child :msg="AppMessage" @myevent="getData" @smile="getSmile"></Child>
<h1>this is App.vue</h1>
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
components:{Child},
data(){
return{
AppMessage:"app.vue原本的数据"
}
},
methods:{
getData(childData){
console.log(childData)
},
getSmile(childSmile){
console.log(childSmile)
}
}
}
</script>
Child.vue
<template>
<div>
<h2>this is Child.vue component</h2>
<h2>{{msg}}</h2>
<button @click="CryDaddy">传给父亲信号:我要闹了</button>
<button @click="smileBabby">smile babby</button>
</div>
</template>
<script>
export default {
props:["msg"],
data(){
return{
childData:"宝宝哭了",
childSmile:"宝宝笑了"
}
},
methods:{
CryDaddy(){
this.$emit("myevent",this.childData)
},
smileBabby(){
this.$emit("smile",this.childSmile)
}
}
}
</script>