vue項目各頁面間的傳值

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

一、父子之間主鍵傳值：（主要是在父主件里的子主件傳遞參數，然后再子主件里用props接收）

 例如Father.vue

<template>
<div class="father">

<Son :value="123456" 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: '12345'
}
},
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,2,3,4,5);
}
}

 

第二、非父子組件間的父子傳值

 

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