博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue中父子组件通信的坑
阅读量:5279 次
发布时间:2019-06-14

本文共 604 字,大约阅读时间需要 2 分钟。

转自:

当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流。

父子组件之间的通信就是 props down,   events up,父组件通过 属性props向下传递数据给子组件,子组件通过事件 events 给父组件发送消息

子组件需要某个数据时,就在内部定义一个prop属性,父组件就像给HTML元素指定特定值一样,把自己的data属性传递给子组件的这个属性。

而子组件内部发生什么事情的时候,就通过自定义事件来把这个事情涉及到的数据暴露出来,供父组件处理。

  

以上代码中,foo是 <my-component> 组件内部定义的prop属性,baz 是父组件的一个data属性,event是子组件定义的一个事件,doThis是父组件的一个方法。

    父组件把baz数据通过prop传递给子组件的foo

    子组件内部得到foo的值,就可以进行相应的操作;

    当子组件内部发生了一些变化,希望父组件能知道时,就利用代码触发event-a事件,把一些数据发送出去;

    父组件把这个事件处理器绑定为doThis方法,子组件发送的数据,就作为doThis方法的参数被传进来;

    然后父组件就可以根据这些数据,进行相应的操作。

转载于:https://www.cnblogs.com/150536FBB/p/11290472.html

你可能感兴趣的文章
Yum安装MySQL以及相关目录路径和修改目录
查看>>
java获取hostIp和hostName
查看>>
关于web服务器和数据库的各种说法(搜集到的)
查看>>
《TCP/IP 详解 卷一》读书笔记 -----第四章 ARP
查看>>
C# Stream 和 byte[] 之间的转换
查看>>
OMG: daily scrum nine
查看>>
redis与spring结合错误情况
查看>>
第六章 字节码执行方式--解释执行和JIT
查看>>
字符串方法title()、istitle()
查看>>
yield语句
查看>>
查看linux系统中占用cpu最高的语句
查看>>
[洛谷P1738]洛谷的文件夹
查看>>
ubuntu server设置时区和更新时间
查看>>
【京东咚咚架构演进】-- 好文收藏
查看>>
【HTML】网页中如何让DIV在网页滚动到特定位置时出现
查看>>
文件序列化
查看>>
jQuery之end()和pushStack()
查看>>
Bootstrap--响应式导航条布局
查看>>
Learning Python 009 dict(字典)和 set
查看>>
JavaScript中随着鼠标拖拽而移动的块
查看>>