VUE組件通信、傳值的方式彙總

一、路由傳值

1.用name傳遞參數

（1）首先在路由文件src/router/index.js裏配置name屬性。

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
]

（2）然後在模板裏(src/APP.vue)用$router.name的形勢接收，比如直接在模板中顯示：

​<p>{{ $router.name}}</p>

2.用冒號的形式傳遞參數

（1）在配置文件裏以冒號的形式設置參數。我們在/src/router/index.js文件裏配置路由。

{
    path:'/params/:newsId/:newsTitle',
     component:Params
}

這裏我們需要傳遞參數是新聞ID（newsId）和新聞標題（newsTitle）.所以我們在路由配置文件裏制定了這兩個值。

（2）在src/components目錄下建立我們params.vue組件，也可以說是頁面。我們在頁面裏輸出了url傳遞的的新聞ID和新聞標題。

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>新聞ID：{{ $route.params.newsId}}</p>
        <p>新聞標題：{{ $route.params.newsTitle}}</p>
    </div>
</template>
 
<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
</script>

（3）在App.vue文件里加入我們的<router-link>標籤。這時候我們可以直接利用url傳值了。

​<router-link to="/params/198/jspang website is very good">params</router-link> |

3.通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數。

this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
        })

對應的路由配置：

{
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

獲取時候這樣來獲取：

<P>{{$route.params.id}}</P>

4.使用path來匹配路由，然後通過query來傳遞參數。

這種情況下，query傳遞的參數會顯示在url後面？id=?

this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

對應的路由配置：

{
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

獲取時候這樣來獲取：

<p>{{$route.query.id}}</p>

二、通過設置緩存形式來傳值

1.兩個組件a和b，在組件a中設置緩存userData：

​
const userData = { 'userName': 123, 'age': 19 }
 
sessionStorage.setItem('用戶信息緩存', JSON.stringify(userData))

2.這時b組件中就可以獲取在a組件中存儲的值了：

const userData = JSON.parse(sessionStorage.getItem('用戶信息緩存'))

三、父子組件之間的傳值

1.父組件向子組件傳值用props

（1）定義父組件，父組件傳遞num這個數值給子組件，如果傳遞的參數很多的話，推薦使用json的形式傳遞：

​<template>
    <div class="father">
        <children num="666"></children>
    </div>
</template>
<script>
import Children from './children'
export default {
  components:{
      Children
  }
}
</script>

（2）定義子組件，子組件通過 props方法獲取父組件傳遞過來的值。props中可以定義能接收的數據類型，如果不符合會報錯。

​<template>
    <div class="children">{{num}}</div>
</template>
<script>
import Children from './children'
export default {
    props:{
        'num': [Number, String],
        'string': [String]
    }
}
</script>

（3）假如接收的參數是動態的，比如 input輸入的內容 v-model的形式：

父組件中：

<template>
    <div class="father">
        <input type="text" v-model="inputText">
        <children :inputVal="inputText"></children>
    </div>
</template>
<script>
    import Children from './children'
    export default {
        components:{
            Children
        }
    }
</script>

子組件中： 

​​​<template>
    <div class="children">{{inputVal}}</div>
</template>
<script>
    import Children from './children'
    export default {
        props:{
            'inputVal': [String]
        }
    }
</script>

（4）父子組件傳值，數據是異步請求，有可能數據渲染時報錯：

原因：異步請求時，數據還沒有獲取到但是此時已經渲染節點了。

解決方案：可以在父組件需要傳遞數據的節點加上v-if = false，異步請求獲取數據後，v-if = true。

2.子組件往父組件傳值，通過emit事件：

子組件中：

​​​<template>
    <div class="children">
        <div @click="emitToFather">點擊按鈕傳值給父親</div>
    </div>
</template>
<script>
    import Children from './children'
    export default {
        methods:{
            emitToFather () {
                this.$emit('childClick', '子組件傳遞的值')
            }
        }
    }
</script>

父組件中：

<template>
    <div class="father">
        <children @childClick="fatherClick"></children>
    </div>
</template>
<script>
    import Children from './children'
    export default {
        components:{
            Children
        },
        methods:{
            fatherClick(val){
                console.log(val) // 打印內容爲"子組件傳遞的值"
            }
        }
    }
</script>

四、不同組件之間傳值，通過eventBus。

1.定義一個新的vue實例，專門用於數據傳輸，並導出；

2.定義傳遞的方法名和傳輸內容，點擊事件或鉤子函數觸發eventBus.emit事件；

3.接收傳遞過來的數據。

五、用vuex進行傳值。

這裏只做簡單的介紹和還是用，複雜的使用情況，自己參照官網。vuex官網地址： https://vuex.vuejs.org/zh-cn/intro.html 

1.如果沒有安裝vuex ,通過命令行： npm install vuex --save 進行安裝；

2.然後在 main.js 中引入並在Vue實例中注入：

import Vuex from 'vuex'

import store from './store/store'

new Vue({ el: '#app'，store，.....還有其他的一些組件模板等)

3.構建核心倉庫store.js：

vuex 應用的狀態 state都應當存放在store.js 裏面，vue 組件可以從 store.js 裏面獲取狀態，可以把 store 通俗的理解爲一個全局變量的倉庫。但是和單純的全局變量又有一些區別，主要體現在當 store 中的狀態發生改變時，相應的 vue 組件也會得到高效更新。在 src 目錄下創建一個 vuex 目錄，將 store.js 放到 store 目錄下。

store.js 中：

import Vuex from 'vuex'

import Vue  from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

    state:{

        id: ' '

    },

    mutations:{

        setId(state ,  id) {

            state.id = id

        }

    }

})

傳遞方法：

 A界面改變store中state裏的參數：

①可以通過直接賦值的方法進行改變this.$store.state.id =  (要傳遞的參數id)；

②官方建議的修改方法： this.$store.commit( 'setId' ，(要傳遞的參數id) )；

B界面接收變化數據參數：

this.$store.state.id 

不過需要注意的是通過vuex這樣寫，頁面刷新之後，數據也會消失。它只是對變量提升。如果不想數據刷新消失，就把數據存儲到Local Storage或者Session Storage或者本地存儲庫中。

 

 

（ps：如果小夥伴們還有其他的方法，歡迎留言交流~(#^.^#)）