vue 6种通信总结①

作者: _星野 | 来源:发表于2018-06-20 10:31 被阅读30次

序言:

如果有的地方写的不严谨或者不太清楚,留言过后补充,代码看不懂,可以运行下源码尝试
源代码,操作和GitHub一样,顺便支持下国产

常用vue通信大概有这几种方式进行:

  • 组件间的父子之间的传值
  • 组件间的子父之间的传值
  • 非组件间的组件间的传值(简称:EventBus)
  • sessionStorage缓存传值
  • 路由带参数跳转进行传值
  • vuex进行传值
我尽量按图的形式写出来,方法大家记忆,图像或多过少比文字记的更牢固

如果有什么不懂,可以拷贝代码自己研究下,6种总结按6个分支的进行分开

很多人刚了解有这问题,怎么区分谁是父组件谁是子组件

父组件(个人理解:谁引用谁的组件,谁就是父组件)

1. 组件间的父子之间的传值

父组件

组件使用三部曲,常用希望记牢,对以后很有帮助


image.png

子组件

image.png
小总结Tips:声明一个自定义名称绑定一个值,让子组件接收,就可以直接调用



组件间的子父之间的传值

子组件(概括思路在子组件触发一个事件,然后通过emit传递给父组件事件)
image.png

父组件

image.png

下一篇:vue 6种通信总结②

相关文章

网友评论

    本文标题:vue 6种通信总结①

    本文链接:https://www.haomeiwen.com/subject/odetyftx.html