vue子组件向父组件传值的方法emit

子组件

<template>
    <div class="chile">我是子组件 -----父组件对我说-----{{msg}}
     <br />
   <input type="button" @click="sendfuMsg" value="给父组件传递值">


    <button @click="btnzf">btnzf</button>


      <button @click="toParent">向父组件传值</button>
    </div>




</template>
<script>
export default {
     name:"child",
        props:{
            msg:{
            type:String,
            }
        },
     data() {
         return {
              msga:"我是子组件呐"
         }
     },

     methods: {
         
         headerInfo(){
             alert("父组件调用子组件")
         },
         sendfuMsg(){
             //子组件传值给父组件  第一个参数是函数   第二次是值
             this.$emit('func',this.msga)
         },
         btnzf(){
             //子组件直接调用父组件的方法
             this.$parent.btn();
         },
           toParent() {
            this.$emit('event1', this.msga)
        }


     },
     
}
</script>

父组件

<template>
  <div id="app">
    <div v-if="seen">
        <ol>
            <li v-for="(todo,index) in todos" :key="index">
                {{todo.text}}
            </li>
        </ol>
    </div>
   
     <input type="text" v-model="message">


     <child  @event1="change($event)"   @func="getMsgFormSon" 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: '页面加载于 ',
               seen:true,
               todos:[
                   {text:"学习javascript"},
                   {text:"学习vue"},
                   {text:"整个牛项目"}
               ]
          }
      },

      methods: {
            btn(){
               this.seen=!this.seen;
                  this.$refs.headerInfo.headerInfo();
            },
              getMsgFormSon(data){
                this.message = data
                console.log(this.message)
            },
            change(data) {
            console.log(data)
        }


      },
}
</script>