vue组件间传值方式详解

组件间的传值分为两大类

1.组件转跳时的传值（兄弟组件间的传值）

2.父子组件间的传值

3.通过Vuex进行传值

1.兄弟组件间的传值

解决思路：
用params和query进行传值

A组件

1.A页面中的代码this.$router.push({name: 'XXX', params: {id: id}})
或
this.$router.push({path: '/XXX',name:'XXX  query: {id: id}})

B页面

id :this.$route.params.id 
或
id :this.$route.query.id

通过query传递参数，页面刷新后，数据不会消失。但是params刷新后会消失!`

但是想要通过pramas传值且页面数据不消失只需要在路由配置中的path加上相应的参数即可
例: {name:'XXX',path:'/XXX/:id',component:XXX}

不过通过query传参页面的URL会显示传递参数的信息,params则不会。

总结params与query:
安全性:params不会在url上显示传递的参数信息,如果是重要的信息推荐使用params
方便性：query不用重新配置路由就可以实现刷新参数不消失
parmas与query的特征就是以上这些，各位可以按需来用(๑•̀ㅂ•́)و✧

2.父子组件间的传值

例子：（父组件中注册的子组件）

        <pagination-font  
        :totalCount="totalCount"  
        :currentPath="currentPath"  
        @paging="otherData"        
        ></pagination-font>

1.父组件向子组件传值

父组件

‘:totalCount’ : 子组件所需要接受的参数
‘totalCount’ : 父组件传递过去的参数

子组件

通过props进行接受值

  props: {
      totalCount:  { 
      type: Number,      //接受值的类型
           default: 0    //默认值
           } 
      }

2.子组件向父组件传值

子组件

自定义一个事件并向父组件传递

     this.$emit("paging", response.data.allData.list);

父组件

在注册的子组件中中加入接受方法的语句

@paging="OtherData"

@paging为接受子组件定义的方法（相当于连接父子组件的桥梁）

otherData为父组件定义的方法

    OtherData(data) {
          this.messageList = data;  // data==response.data.allData.list
           }

3.通过Vuex进行传参

Vuex相当于一个公共的场所，想要传参只需要对数据在vuex中
进行读写就好啦

• 先在vuex中对数据进行定义

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {    
table:""
}  

const mutations = { 
    GET_TABLE:(state,data)=>{   state.table=data  }
    }
    
const actions = {}
export default new Vuex.Store({ 
   state, 
   mutations,
   actions
   })

• 对数据进行写入

this.$store.commit("GET_TABLE",table)

• 对数据进行读取

this.$store.state.table

大家有木有觉得使用vuex感觉非常的方便呢︿(￣︶￣)︿

ps:至于vuex的安装及配置，之后会出教程的呀(#`O′)