vue项目各页面间的传值

githut地址：https://github.com/liguoyong/vueobj1

一、父子之间主键传值：（主要是在父主件里的子主件传递参数，然后再子主件里用props接收）

例如Father.vue

<template>
<div class="father">

<Son :value="" title="hello" :inputVal="val"
@sendData="testAction">
</Son>

<button @click="testAction()">按钮</button>

</div>
</template>

<script>
import Son from './Son.vue'
export default {
components: {
Son
},
data(){
return {
message: 'hello vue',
val: ''
}
},
methods: {
sendAction(){
this.val = this.$refs.in.value;
}
}
}
</script>

例如son.vue

export default {
//接收组件标签上的属性
//外部属性,只能访问，不能修改
// 单向数据流：保证数据是自顶向下的
// props: ['value', 'title']
props: {
value: Number,
title: String,
inputVal: String
},
//内部属性
data(){
return {
name: this.title
}
},
methods: {
modify(){
this.name = 'world';
},
sendAction(){
let value = this.$refs.in.value;

//调用click事件
// 触发组件标签上的自定义事件
// 参数1：事件名字
// 参数2：传递的值sendData
this.$emit('sendData', value, ,,,,);
}
}

第二、非父子组件间的父子传值

 

 1.首先：

 

 

 

第一种：

main.js: 

 

import Vue from 'vue'

import App from './App.vue' 

给Vue实例化添加一个$center的方法 

Vue.prototype.$center = new Vue();

 

第二种：

 

main.js:   

import Vue from 'vue'
import App from './App.vue'
import center from './center' 

Vue.prototype.$center = center; 

const vm = new Vue({
    el: '#app',
    render: h=>h(App)
})
center.js文件：

export default {
    $on: function(eventName, callback){
        // 根据事件名字获得了回调
        // 保存所有的回调函数
    },

    $emit: function(eventName, ...rest){
        // 根据事件名字，调用对应的回调函数
        // 调出来之前保存的相同事件名字的回调函数，一个一个执行。
    },
    $off: function(){
    }
}

ba.vue文件:

 methods: {
        //发送事件：（触发事件发送参数）
        sendAction(){
            console.log(this.value);
            //触发事件
            this.$center.$emit('send-data', this.value);
        }
    }
 bb.vue文件：（接收参数）

created() {
        // 监听事件
        this.$center.$on('send-data', this.listener);
    },
beforeDestroy(){
        console.log('组件销毁前');
        //移除监听
        this.$center.$off('send-data', this.listener);
    }

三.页面跳转通过路由带参数传递数据

// 1.页面中的代码
this.$router.push({
    name: 'generalAdminOrderFlowAdd',
    params: {
      type: 'add',
      templateType: this.orderTemplateType
     }
 })
或

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

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

　这样使用起来很方便，但url会变得很长，而且如果不是使用路由跳转的界面无法使用。

 // 2.路由中的代码

 {
   path: ':type/:templateType',
   name: 'generalAdminOrderFlowAdd',
   component:   require('@/components/generalAdmin/order/orderFlow')
}

// 3.获取页面中的参数值

 let type = this.$route.params.type

四 、使用vuex进行数据传递;

在应用复杂时，推荐使用vue官网推荐的vuex，以下讨论简单SPA中的组件间传值。

// 1.index.js页面代码

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex)
const state = {
  order: {} //声明order对象
}
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

//2. getters.js页面的代码

export default {
 // 声明获取order的方法
  getOrder (state) {
    return state.order
  }
}

//3. mutation.js页面的代码

export default {
//设置order的值
  SET_ORDER (state, order) {
    state.order = order
  }

// 4.在页面中设置调用set方法设置全局order的值

this.$store.commit('SET_ORDER', order)// SET_ORDER为order值的设置方法的方法名

// 5.获取全局的order值

// 从vuex中获取order

let template = this.$store.state.order

五.通过$parent,$chlidren等方法调取用层级关系的组件内的数据和方法
通过下面的方法调用： this.$parent.$data.id

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

//获取父元素data中的id 这样用起来比较灵活，但是容易造成代码耦合性太强，导致维护困难

六、通过eventBus传递数据 使用前可以在全局定义一个eventBus

window.eventBus = new Vue();

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

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

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

//val即为传递过来的值

eventBus.$on('eventBusName',

function(val) {

console.log(val)

}

)

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

eventBus.$off('eventBusName');