详解vue 数据传递的方法

更新时间：2018年04月19日 16:13:33 作者：wxx1992816

这篇文章给大家介绍了vue数据传递的方法，包括，父组件向子组件传值，子组件向父组件传值，路由传值等多种方法，需要的朋友参考下

组件（Component）是 Vue.js 最强大的功能。组件可以封装可重用的代码，通过传入对象的不同，实现组件的复用，但组件传值就成为一个需要解决的问题。

1.父组件向子组件传值

组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。

子组件：

子组件需要从父组件获取 logo 的值，就需要使用 props: ['logo']

子组件需要从父组件获取 logo 的值，就需要使用 props: [‘logo']

这里写图片描述

父组件：

这里写图片描述

2.子组件向父组件传值

子组件主要通过事件传递数据给父组件。

子组件：

这里写图片描述

其中 transferUser 是一个自定义的事件，this.username 将通过这个事件传递给父组件。

父组件：

这里写图片描述

getUser 方法中的参数 msg 就是从子组件传递过来的参数 username

3.路由传值

这里写图片描述

使用时，在生命周期created赋值。

这里写图片描述

4.通过localStorage或者sessionStorage来存储数据

这里写图片描述

5.Vuex

在应用复杂时，推荐使用vue官网推荐的vuex。

https://vuex.vuejs.org/zh-cn/getting-started.html

您可能感兴趣的文章:

前端vue实现的h5页面接入微信支付流程(jsapi方式)
vue实现微信支付有三种方式,第一种方式是PC端支付,第二种方式是H5支付,第三种方式是微信公众号支付,这篇文章主要给大家介绍了关于前端vue实现的h5页面接入微信支付流程,文中介绍的方法是利用jsapi方式,通过代码将实现的方法介绍的非常详细,需要的朋友可以参考下
2024-01-01
vue使用urlEncode问题
这篇文章主要介绍了vue使用urlEncode问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
移动端Vue2.x Picker的全局调用实现
这篇文章主要介绍了移动端Vue2.x Picker的全局调用实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
vue中可以绑定多个事件吗
这篇文章主要介绍了vue中可以绑定多个事件吗，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue实现腾讯云点播视频上传功能的实现代码
这篇文章主要介绍了Vue实现腾讯云点播视频上传功能的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-08-08
vue - props 声明数组和对象操作
这篇文章主要介绍了vue - props 声明数组和对象操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue3中h函数的常用使用方式汇总
其实h()函数和createVNode()函数都是创建dom节点,他们的作用是一样的,下面这篇文章主要给大家介绍了关于vue3中h函数的常用使用方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
vue项目接口访问地址设置方式
这篇文章主要介绍了vue项目接口访问地址设置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue.js 微信支付前端代码分享
下面小编就为大家分享一篇vue.js 微信支付前端代码。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue echarts实现航班选座案例分析
这篇文章主要介绍了vue echarts实现航班选座案例分析,代码是使用echarts来实现的，主要用到的是svg和自定义地图的相关知识，需要的朋友可以参考下
2022-05-05