vue父组件向子组件传值和得到子组件的属于和方法

父组件如下

<template>
  <div id="app">
     <child msg= "我是父组件给子组件传值的"  ref="headerInfo"></child>
    <button @click="btn()">点击</button>
</div>
   
</template>


<script>
import  child from  "../components/child"
export default {
      name:'index',
      components:{
          child
      },
      data() {
          return {
               message: '页面加载于 ',
             
          }
      },
      methods: {
            btn(){
               this.seen=!this.seen;
                  this.$refs.headerInfo.headerInfo();
            }
      },
}
</script>  

子组件

<template>
    <div class="chile">我是子组件 -----父组件对我说-----{{msg}}</div>
</template>
<script>
export default {
     name:"child",
        props:{
            msg:{
            type:String,
            }
        },
     data() {
         return {
             
         }
     },

     methods: {
         
         headerInfo(){
             alert("父组件调用子组件")
         }
     },
     
}
</script>