vue学习笔记--父子组件通信

来源:互联网 发布:mac怎么下载千牛 编辑:程序博客网 时间:2024/05/21 05:19

组件化开发在开发中已十分普遍,有时我们需要在组件之间传递一些数据,以便将这些组件紧密联系在一起。
首先我们将讨论如何实现父组件向子组件传递数据
第一步:在子组件中绑定需要传递的数据

 <shop-car :seller="seller" ></shop-car> 

第二步:在子组件中使用props接收数据

props: {    seller:{          type:Object       }}

简单的两步就成功从父组件将数据传到了子组件,当然前提是你已经成功在父组件中注册了子组件。

子组件向父组件传参:
第一步:通过emit触发父组件的事件,vm.$emit( event, […args] )。在子组件上绑定事件触发emit。

 Vue.component('child',{            methods:{                sendMsg:function(){                    this.$emit("listern","msg");                }            },              template:'<button  @click="sendMsg" >click</button>'            })

第二步:在子组件上监听事件并触发父组件上的方法

<child v-on:listern="showMsgFromChild" ></child>

showMsgFromChild是父组件上的一个函数,他由子组件触发。

原创粉丝点击