vuejs几种不同组件（页面）间传值的方式

在应用复杂时，推荐使用vue官网推荐的vuex，以下讨论简单SPA(single-page application 简称为 SPA)中的组件间传值。

一、路由传值

　　路由对象如下图所示：

　　

　　在跳转页面的时候，在js代码中的操作如下，在标签中使用<router-link>标签

1 2 3 4 5 6

this .$router.push({                          name:  'routePage' ,                          query/ params : {                              routeParams:  params                          }

　需要注意的是，实用params去传值的时候，在页面刷新时，参数会消失，用query则不会有这个问题。

　这样使用起来很方便，但url会变得很长，而且如果不是使用路由跳转的界面无法使用。取值方式分别为：this.$route.params.paramName和this.$route.query.paramName

   注：使用params传值，也可以做到页面刷新，参数不丢失，在命名路由时这样设置：

[javascript]  view plain  copy

1. {  
2.       path: '/OrderDetail/:orderId/:type',  
3.       name: 'OrderDetail',  
4.       component: OrderDetail,  
5.       meta: {  
6.         title: '订单详情',  
7.         needAuth: true  
8.       }  
9. }  

使用时：

[javascript]  view plain  copy

1. this.$router.push({name: 'OrderDetail', params: {orderId: id, type: 'buy'}})  

这种方式会把路由导航到 /OrderDetail/22aead11a99c4c91aa2169ac17d0ddb5/booking 路径

参考：http://router.vuejs.org/zh-cn/essentials/named-routes.html

二、通过$parent,$chlidren等方法调取用层级关系的组件内的数据和方法

　　通过下面的方法调用：

1 2	this .$parent.$data.id   //获取父元素data中的id this .$children.$data.id   //获取父元素data中的id

　　这样用起来比较灵活，但是容易造成代码耦合性太强，导致维护困难

1，父组件向子组件传递场景：Father上一个输入框，根据输入传递到Child组件上。

父组件：

<template>
  <div>
    <input type="text" v-model="msg">
    <br>
    //将子控件属性inputValue与父组件msg属性绑定
    <child :inputValue="msg"></child>
  </div>
</template>
<style>

</style>
<script>
  export default{
    data(){
      return {
        msg: '请输入'
      }
    },
    components: {
      child: require('./Child.vue')
    }
  }
</script

子组件：

<template>
  <div>
    <p>{{inputValue}}</p>
  </div>
</template>
<style>

</style>
<script>
    export default{
        props: {
          inputValue: String
        }
    }
</script>

2，子组件向父组件传值场景：子组件上输入框，输入值改变后父组件监听到，弹出弹框

 

 父组件：

<template>
  <div>
//message为子控件上绑定的通知；recieveMessage为父组件监听到后的方法
    <child2 v-on:message="recieveMessage"></child2>
  </div>
</template>
<script>
  import {Toast} from 'mint-ui'
  export default{
    components: {
      child2: require('./Child2.vue'),
      Toast
    },
    methods: {
      recieveMessage: function (text) {
        Toast('监听到子组件变化'+text);
      }
    }
  }
</script>

子组件：

 

<template>
  <div>
    <input type="text" v-model="msg" @change="onInput">
  </div>
</template>
<script>
  export default{
    data(){
      return {
        msg: '请输入值'
      }
    },
    methods: {
      onInput: function () {
        if (this.msg.trim()) {
          this.$emit('message', this.msg);
        }
      }
    }
  }
</script>

还有一个子组件使用父组件数据的方法：prop

Prop

子组件想要使用父组件的数据，我们需要通过子组件的 props 选项来获得父组件传过来的数据。以下我使用在 .vue 文件中的格式来写例子。

如何传递数据

在父组件 father.vue 中引用子组件 child.vue，把 name 的值传给 child 组件。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<template>    <div class= "app" >      // message 定义在子组件的 props 中      <child :message= "name" ></child>    </div> </template> <script>    import child from './child.vue' ;    export default {      components: {        child      },      data() {        return {          name: 'linxin'        }      }    } </script>

在子组件 child.vue 中的 props 选项中声明它期待获得的数据

?

1 2 3 4 5 6 7 8 9

<template>    <span>Hello {{message}}</span> </template> <script>    export default {      // 在 props 中声明获取父组件的数据通过 message 传过来      props: [ 'message' ]    } </script>

那么页面中就会渲染出：Hello linxin

单向数据流

当父组件的 name 发生改变，子组件也会自动地更新视图。但是在子组件中，我们不要去修改 prop。如果你必须要修改到这些数据，你可以使用以下方法：

方法一：把 prop 赋值给一个局部变量，然后需要修改的话就修改这个局部变量，而不影响 prop

?

1 2 3 4 5 6 7 8 9

export default {    data(){      newMessage: null    },    props: [ 'message' ],    created(){      this .newMessage = this .message;    } }

方法二：在计算属性中对 prop 进行处理

?

1 2 3 4 5 6 7 8

export default {    props: [ 'message' ],    computed{      newMessage(){        return this .newMessage + ' 哈哈哈' ;      }    } }

 

三、通过eventBus传递数据（自定义事件）

　　使用前可以在全局定义一个eventBus

1	window.eventBus =  new  Vue();

　　在需要传递参数的组件中，定义一个emit发送需要传递的值，键名可以自己定义（可以为对象）

1	eventBus.$emit( 'eventBusName' , id);

　　在需要接受参数的组件重，用on接受该值（或对象）

1	//val即为传递过来的值 eventBus.$on('eventBusName', function(val) { 　console.log(val) })

　　最后记住要在beforeDestroy()中关闭这个eventBus

1	eventBus.$off( 'eventBusName' );

四、通过localStorage或者sessionStorage来存储数据(参考：http://blog.csdn.net/qq_32786873/article/details/70853819)

setItem存储value
用途：将value存储到key字段
用法：.setItem( key, value)
代码示例：
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");

getItem获取value
用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例：
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");

链接：http://www.cnblogs.com/ygtq-island/p/6728137.html