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 触发传递自定义事件,及数据,在父组件中子组件标签上 @自定义事件,调用父组件定义事件,这样,就实现了子父组件之间的通信

posted @ 2018-07-10 16:42  Sky_Ice  阅读(592)  评论(1编辑  收藏  举报