数据传递方式
- 父组件传递到子组件
- 子组件 传 父组件
- 父组件 直接拿子组件数据
- 子组件直接拿 父组件数据
- 兄弟组件间传值
==================================================================================
父组件传值到子组件
1，在父组件中 引用子组件 在子组件中动态绑定数据 动态数据的绑定用v-bind
array是父组件中的数据 可以是多种类型
2，在子组件中 利用props 对象 接收数据
接收数据的方式：
- 数组形式：
value 是父组件中的自定义属性，这里应该是arrList
- 对象形式 ：对象名为 自定义属性名，在内部可以进行类型检测，默认值等 default 可以定义成一个函数，返回什么进行验证
简写 props:{ arrList:Array } 数据：类型
================================================================================================
子组件传值到父组件
利用 this.$emit
- 在子组件中 this.$emit("自定义事件名"，this.mag) ,自定义一个事件，并传递数据
- 在父组件中监听自定义事件， 在子组件标签中 写 @自定义事件名=“父组件事件” 当监听到 就会调用父组件事件
- 父组件中的事件对应函数的 参数 就是传递过来的值
this.$emit("datavalue",this.msg) 这行代码在子组件中
<子组件标签 @datavalue="getdata" > 这是父组件中的子组件标签
getdata(val){
val (this.msg)
}
========================================================================================
父组件 直接取得 子组件数据
- 在父组件中的 子组件标签上 定义属性 ref = ‘val’
- 在函数中 使用 this.$refs.val.msg 就能拿到子组件数据
=============================================================================================
子组件 直接 从父组件拿数据
this.$parent.msg 直接就能拿到父组件数据
======================================================================================
兄弟组件之间 的数据传递
https://blog.csdn.net/biao_feng/article/details/81510111
------------------------------非常详细 ，以后可以回来翻阅-------------------------------------------------------------------
目录
方法二：通过设置 Session Storage/local Storage缓存的形式进行传递
2、 对Session Storage/local Storage缓存进行统一封装
方法一：通过路由带参数进行传值
需求：两个页面A,B，页面A传递参数值phase给页面B.
做法：
1）页面A附加参数：//更新地址栏里面的信息哦
router.push({path: "/iteration/track", query: {...this.$route.query, phase: this.phase}})
PS: this.$router.push({ path: '/iteration/track', query: {...this.$route.query, phase: this.phase} }) // 跳转到B
2） 页面B获取地址栏中的参数；
this.$route.query.project_id
方法二：通过设置 Session Storage/local Storage缓存的形式进行传递
想了解更多有关sessionStorage/localStorage,请移步：
https://blog.csdn.net/huazhongkejidaxuezpp/article/details/50283081
https://blog.csdn.net/huazhongkejidaxuezpp/article/details/84308916
1、 原生用法使用
window.localStorage['aaa']='一个例子啊' console.log(window.localStorage.getItem('aaa')) window.localStorage.setItem('test1',[1,2,3,4,5,6]) window.localStorage.setItem('test2',{userId:'iiiiii',token:7788777}) window.localStorage.setItem('test3','dfdfdf') console.log(window.localStorage.getItem('test1')) console.log(window.localStorage.getItem('test2')) console.log(window.localStorage.getItem('test3')) window.sessionStorage.setItem('test1',[1,2,3,4,5,6]) window.sessionStorage.setItem('test2',{userId:'iiiiii',token:7788777}) window.sessionStorage.setItem('test3','dfdfdf') console.log(window.sessionStorage.getItem('test1')) console.log(window.sessionStorage.getItem('test2')) console.log(window.sessionStorage.getItem('test3'))缺点：
1）到处直接使用localstorage['aaa']='xxx'这些原生语法实现，这样耦合度太高了，假如有一天需要换实现方式，或者对存储大小做一些控制，那么需要修改的代码就会很多
2)起的key的名字难免会重复，而且这样也会造成全局污染
3) 因为localstorage的使用不规范，所以造成了存储空间的浪费和不够用
解决：
封装storage的使用方法，统一处理
规范storage的key值的命名规则
规范storage的使用规范
2、 对Session Storage/local Storage缓存进行统一封装
import localstorage from '@src/util/localstorage'; import sessionstorage from '@src/util/sessionstorage'; import storage from '@src/util/storage'; storage.storage('l','djjdjjd','jwejjwjejw',1); storage.storage('s','djjdjjd','jwejjwjejw',1); let a = storage.storage('l','djjdjjd',undefined,null); console.log(a)
例如：页面A,B
页面A中设置：storage.set('s','djjdjjd','jwejjwjejw',1);
页面B中获取：storage.get('s')
ps:Session Storage（程序退出销毁） 和 Local Storage（长期保存）
localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M
方法三：父子组件之间的传值(通过props属性)
1、父组件给子组件传值
父组件核心代码：
ps: SubmitTest 为子组件名称
<SubmitTest :iteration_id='this.iteration_id'/>子组件核心代码：
props: { iteration_id: { type: String }2、子组件给父组件传值(通过emit事件)
具体参考：https://www.cnblogs.com/LoveAndPeace/p/7273648.html
方法四：不同组件之间传值，通过eventBus
场景：小项目，页面量较少的情况下使用
使用前可以在全局定义一个eventBus window.eventBus = new Vue(); 在需要传递参数的组件中，定义一个emit发送需要传递的值，键名可以自己定义（可以为对象） eventBus.$emit('eventBusName', id); 在需要接受参数的组件重，用on接受该值（或对象） //val即为传递过来的值<br>eventBus.$on('eventBusName', function(val) {<br> console.log(val)<br>}) 最后记住要在beforeDestroy()中关闭这个eventBus eventBus.$off('eventBusName');方法五：vuex进行传值
场景：vuex主要是是做数据交互，适用于大项目，页面量较多的业务
解决难题：父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型spa单页面框架项目，页面多并且一层嵌套一层的传值，异常麻烦，用vuex来维护共有的状态或数据会显得得心应手
例子： 两个组件A和B，vuex维护的公共数据是地理位置，现在A和B页面显示的是相同的地理位置。 需求想实现：如果A修改了地理位置，则B页面的显示随之修改，反之B修改同理。这就是vuex维护公共状态或数据的魅力，在一个地方修改了数据，在这个项目的其他页面都会变成这个数据。
vuex了解：
参考
https://blog.csdn.net/qq_35430000/article/details/79291287
https://www.cnblogs.com/ygtq-island/p/6728137.html
https://www.cnblogs.com/LoveAndPeace/p/7273648.html
参数传递
子组件先定义好接收的参数和事件
<div > {{title}} <div class="row"> <Button icon="md-refresh" @click="refresh()" >刷新</Button> </div> </div> props: {//参数传递需要在props里面声明 'title': { type: String, default: '' }, }, methods: {//事件传递需要通过$emit来传递，参数refresh要与父组件@后面的属性相对应 refresh(){ this.$emit('refresh'); } },父组件传递参数给子组件
<KJtitle title="矿金管理" @refresh="myRefresh"> </KJtitle>
转载于:https://my.oschina.net/carbenson/blog/2988346
摘要：
在没有使用路由时，vue中参数传递是被限制在父子组件中，而当兄弟组件间需要传递参数时是很繁琐的，只能子传父父传子这样绕圈；但使用了路由之后就变得轻松许多。
根组件App：
router-view的注意点在代码中已经注释。
HelloWorld组件：
在这个组件中使用编程式导航进行跳转(router-link标签为申明式导航，且可以很方便的借助此标签的动态类名做高亮效果)，并借助query查询字符串来传递参数
Test组件：
在Test组件中可以通过self. r o u t e . q u e r y 来 调 取 路 由 相 关 的 参 数 ， route.query来调取路由相关的参数， route.query来调取路由相关的参数，route里面有很多属性可以console看看
可以看见，包含了当前组件路由的所有信息，fullPath,matched,query,params,meta等（侧边栏动态路由高亮以及默认，就会用到matched中对象的path属性进行判断），到此借助路由的查询字符串传参已经完成了
还可以借助路由的params来传递参数
HelloWorld组件：
Test组件：
但是如果我们将path和params一起用呢
一起用的结果就是参数传递失败，原因在路由官网有说明
所以说明path+query，name+parmas都可以传递参数，也可以像官网说的一样直接用path中用模板字符串+占位符来拼接url，且不管是path还是name，都是指明了特定组件的，所以只会向指定的组件路由上去注入参数，其他兄弟组件的路由是接收不到的。还有一种方式也是官方推荐的：
在定义路由时，加上props属性，将route作为参数传进箭头函数，然后取出里面的查询字符串并存进了props
HelloWorld组件：
路由index.js文件：
Xx组件：
页面：
这种方式传递参数，一是需要在配置路由时把props定义为一个函数，二是在组件内用props去接收，就完成了。
欢迎指正。我们可以发现router.push跟 window.history.pushState和 window.history.go好像， 实际上它们确实是效仿 window.history API 的。
vue
订阅
