详解vue 数据传递的方法
更新时间：2018年04月19日 16:13:33 作者：wxx1992816
这篇文章给大家介绍了vue数据传递的方法，包括，父组件向子组件传值 ，子组件向父组件传值 ，路由传值等多种方法，需要的朋友参考下
组件（Component）是 Vue.js 最强大的功能。组件可以封装可重用的代码，通过传入对象的不同，实现组件的复用，但组件传值就成为一个需要解决的问题。
1.父组件向子组件传值
组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。
子组件：
![子组件需要从父组件获取 logo 的值，就需要使用 props: ['logo']](http://img.jbzj.com/file_images/article/201804/2018041916044820.png)
子组件需要从父组件获取 logo 的值，就需要使用 props: [‘logo']
父组件：
2.子组件向父组件传值
子组件主要通过事件传递数据给父组件。
子组件：
其中 transferUser 是一个自定义的事件，this.username 将通过这个事件传递给父组件 。
父组件：
getUser 方法中的参数 msg 就是从子组件传递过来的参数 username
3.路由传值
使用时，在生命周期created赋值。
4.通过localStorage或者sessionStorage来存储数据
5.Vuex
在应用复杂时，推荐使用vue官网推荐的vuex。
相关文章
这篇文章主要为大家介绍了vue实现前端按钮组件权限管理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
vue3中利用Export2Excel将数据导出为excel表格
这篇文章主要给大家介绍了关于vue3中利用Export2Excel将数据导出为excel表格的相关资料,最近项目需要前端来导出Excel操作,所以给大家总结下,需要的朋友可以参考下2023-09-09
Vue 实现 Tab切换实现的场景很多，比如，利用vue-router、利用第三方插件、利用组件等等.本文使用组件来实践tab选项卡2017-03-03
这篇文章主要为大家详细介绍了vue双花括号的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
在IIS服务器上部署Vue项目时,可能会遇到路由无法正常跳转的问题,解决方法有两种,下面就来具体介绍一下解决方法,感兴趣的可以了解一下2024-10-10
这篇文章主要介绍了vue3利用store实现记录滚动位置的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要给大家介绍了关于Vue.js实例方法之生命周期的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
Vue3中的keep-alive组件用于缓存页面,以便在切换页面时保留其状态,下面这篇文章主要给大家介绍了关于Vue3除了keep-alive还有哪些实现页面缓存的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了VueRouter导航守卫的详细用法以及分类介绍，有兴趣的朋友学习参考下吧。2017-12-12
解决vite项目Uncaught Syntaxerror:Unexpected token＞vue项
这篇文章主要介绍了解决vite项目Uncaught Syntaxerror:Unexpected token＞vue项目上线白屏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论