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';

  exportdefault{

    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>

  exportdefault{

    // 在 props 中声明获取父组件的数据通过 message 传过来

    props: ['message']

  }

</script>

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

单向数据流

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

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

?

1

2

3

4

5

6

7

8

9

exportdefault{

  data(){

    newMessage:null

  },

  props: ['message'],

  created(){

    this.newMessage = this.message;

  }

}

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

?

1

2

3

4

5

6

7

8

exportdefault{

  props: ['message'],

  computed{

    newMessage(){

      returnthis.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