vue中各种通信传值方式总结

原创 Fly丶 教程 vue专题 106阅读 29 天前 举报

1、路由通信传值

路由通信是通过路由跳转用query把参数带过去,也是vue常用的通信手段。

例子:创建并在路由注册一个组件Head

创建另一个组件About并在路由注册

路由注册的简单代码

2、sessionStorage本地缓存通信

还是列举上面的例子,将它们稍微改一改就可以了,路由配置都一样的。sessionStorage的特点就是浏览器关掉缓存就会消失,这是它区别于localStorage的。

例子: Heade代码:

About代码:

3、父组件向子组件通信

定义父组件Head,还是用上面的例子,父组件传递一句话给子组件,如果传递的参数很多,可使用json数组{}的形式。

例子: Head父组件代码

About子组件代码

4、子组件向父组件通信 子组件向父组件通信是通过emit事件发送的,话不多说,直接上案例,还是利用上面的案例稍作修改 About子组件代码:

Head父组件代码

5、vuex状态管理

状态管理使用起来相对复杂,但是对于大型项目确实非常实用的。

(1)安装vuex,并建立仓库文件

安装过后在src文件中创建store文件夹,并建立index.js文件,index.js的代码如下:

(2)在min.js中注册store仓库 代码如下:

(3)状态的读取和提交 还是使用上面的案例,我们以子组件About提交改变状态,父组件Head接受状态并显示出来下面是About组件提交状态

Head组件接受状态:

总结:以上就是vue中的通信方式,当然还有一些,比如说eventBus什么的,适用于中小型项目,但是我用的比较少,一般上面的几种在开发中已经够用的,例子很简单,学习是永无止境的,具体更深的东西还得下功夫去研读官网或者其他资料,本文中有不对的地方或者疑惑的地方,还望大家多多指教!谢谢。

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复