vue备忘录

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>