vue 模板

父组件

<template>
  <div>
      <comtest2  :name = "name" @func="getMsg"></comtest2>
      <button @click="dianji" >按钮</button>
  </div>
</template>

<script>
import test02 from './test02.vue';
export default {
      data() {
      return {
        name: "我的名字是test01",
        number: 0
      }
      },
      methods:{
        dianji(){
          this.number++
          alert("我是按钮")
        },
        getMsg(msg){
          console.log(msg)
        }
      }, 
      created(){
        console.log(this.name)
      },
      mounted(){
        console.log(this.name)
      },
      beforeMount(){
      },
      watch: {
        number(newValue, oldValue) {
          console.log(oldValue)
          console.log(newValue)
      }
      },
      components: {comtest2:test02},
      //props: ['name'],
      
}
</script>

<style>

</style>

子组件

<template>
  <div>
      {{name}}
  </div>
</template>

<script>
// import animated from 'animate.css' 
export default {
      data() {
      return {
          msg: "我是子组件的msg"
      }
      },
      methods:{ 
      }, 
      beforeMount(){
      },
      mounted(){
          this.$emit('func',this.msg)
          console.log(this.name)
      },
      watch: {
      },
    //   props: ['name'],
      props: {
          'name': String
      },
}
</script>

<style>

</style>