vue通信之子父组件通信

子父组件通信：

创建一个父组件 Home ， 创建一个子组件 Head

Home 组件：

import Head from "./Head.vue"  // 引入 Head 组件

components:{
   "v-head":Head     // 注册 head 组件
}

Head 组件：

<button @click="toPar()">传递给父组件</button>  // 点击事件触发

data(){
  return{
    msg:"传递给父组件的信息"
  }
},

methods:{ toPar(){ this.$emit("toParent",{msg:this.msg}) // $emit 触发传递自定义的事件，{} 对象里可以传递数据  } }

Home 组件：

<v-head @toParent="getData"></v-head>   // @toParent 通过触发的事件，调用 父组件中定义的事件

 methods:{
    getData(data){
       console.log(data);   // 打印传递过来的数据
    }
 }

控制台打印数据：

{msg: "传递给父组件的信息"}

子组件 通过 $emit 触发传递自定义事件，及数据，在父组件中子组件标签上 @自定义事件，调用父组件定义事件，这样，就实现了子父组件之间的通信