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：如果小伙伴们还有其他的方法，欢迎留言交流~(#^.^#)）