1.父子组件

通常父子组件间我们使用props传值，方式如下

1.1父传子

父组件

<template>
  <HelloWorld :msg="msg">
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data(){
    return({
      msg:"父组件的值"
    })
  },
  components: {
    HelloWorld
  }
}

子组件

<template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      //以下数据皆为选填数据
      type: 'String',    // 验证传来值的数据类型 
      default: '' ,    //父组件如果没有传值，就取这个默认值；如果说是一个数组或者对象，需要写成函数形式
      required: true/false ,   // true--必须传的
      validator:function(val){         // v是父组件的数据可以对传入的值进行自定义的校验通过添加一个validator函数进行数据的校验，如果函数返回false,则校验失败，进而报错
        return false                  // 验证失败
        return true                  // 验证成功
      }
    }
    },
  data:()=>{
    return{
    
    }
  },
  methods:{

  }
}
</script>

1.2子传父

子组件

<template>
  <div class="hello" @click="toFar">
    点击
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
 
  data:()=>{
    return{
    
    }
  },
  methods:{
    toFar(){
      this.$emit('fromChild','msg')
    }
  }
}
</script>

父组件

<template>
  <HelloWorld @formChild="getMsg">
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data(){
    return({
      msg:"父组件的值"
    })
  },
  methods:{
    getMsg(val){
      console.log(val)
    } 
  },
  components: {
    HelloWorld
  }
}
</script>

2.兄弟组件

2.1公共的事件总线eventBus

我们可以创建一个eventbus.js文件来作为中转文件

import Vue from 'vue'
export default new Vue()

A组件派发事件

//pageName:a组件
<template>
  <div @click="toB">

  </div>
</template>

<script>
import eventBus from '../tools/eventbus.js'
export default {
  data () {
    return {
    }
  },
  methods: {
    toB(){
      eventBus.#emit('formA','Aval')
    }
  }, 
}
</script>

B组件点阅事件

//pageName:b组件
<template>
  <div></div>
</template>

<script>
import eventBus from '../tools/eventbus.js'
export default {
  data () {
    return {
    }
  },
  mounted(){
    eventBus.$on('formA',setData(val))
  },
  methods: {
    setData(val){
     console.log(val)
    }
  }, 
}
</script>

3.路由传参

3.1query传参

this.$router.push({
      path: '/detail',
      query: {
         id: id
       }
 })
 
 // 对应路由配置：
 {
     path: '/detail',
     name: 'Detail',
     component: Detail
 }
 
 // 子组件获取参数:
 this.$route.query.id

3.2params传参

this.$router.push({
    name: 'Detail',
    params: {
       id: id
    }
 })
 
 // 对应路由配置：
 {
     path: '/detail',
     name: 'Detail',
     component: Detail
  }
  
 // 子组件获取参数:
 this.$route.params.id

3.3params传参且提前约定好参数

// 直接在路由地址后面拼接参数
this.$router.push({
      path: `/detail/${id}`,
 })
 
// 路由配置
{
     path: '/detail/:id',
     name: 'Detail',
     component: Detail
 }
 
//获取参数
this.$route.params.id

关于query传参和params传参的特点
query传参
1.标定路由时name和path都行
2.query传参类似于get请求参数会处于url上
3.页面刷新时参数不会消失
params传参
1.标定路由时使用name
2.请求参数不会处于URL上
3.页面刷新参数会失效（除非约定好参数）

4.$refs，$parent,$children

4.1$refs

获取的是设置ref的子组件的实例，
在子组件中

<template>
  <div class="hello" @click="toFar">
    子组件
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
 
  data:()=>{
    return{
     num:1
    }
  },
  methods:{
    toFar(){
      this.$emit('fromChild','msg')
    }
  }
}
</script>

在父组件中

<template>
  <HelloWorld ref="hw" @formChild="getMsg" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data(){
    return({
      msg:"父组件的值"
    })
  },
  mounted(){
    
    console.log(this.$refs)
  },
  methods:{
    getMsg(){
      console.log(this.$children)
    } 
  },
  components: {
    HelloWorld
  }
}
</script>

打印得到的结果是

ref对象.png

5.vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它的状态存储是响应式的。采用集中式存储管理应用的所有组件的状态，也就是说，对数据的所有操作都要在vuex中进行。但是我们该如何去使用呢，话不多说
先来看看vuex的基本雏形

const store = new Vuex.Store({
    state: {
        //相当于自定义组件中的data
      count: 1,
    },
    getters:{
        //相当于自定义组件中的computed
        dataList:(state)=>{
           //计算分页后的数据
            
            return (state.count + 1);
        },
    },
    mutations: {
        //相当于自定义组件中的methods，只能做同步的操作
        //对state中的数据进行修改
        increment(state) {
          state.count++
      },
    },
    actions: {
        //异步操作，例如ajax请求
        //使用commit 触发 mutations
    }
})

store代表仓库的意思，在vuex中也依旧是，它存储了state（状态），getters（自定义的依赖变量），mutations(同步操作函数集)，actions(异步操作函数集)

5.1state(状态)

state中存放定义的状态，获取的在页面中获取的方法有
this.$store.state
如果需要获取的数据过多时我们可以使用语法糖

...mapState({
      count: 'count'
    })

5.2getters(依赖状态自定义变量)

getter 相当于自定义组件中的computed，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
getter 接受 state 作为其第一个参数，也可以接受其他 getter 作为第二个参数。
可以使用this.$store.getters 访问这些值。

5.3mutations

vuex的机制中只有mutation可以更改 Vuex 的 State 中数据。
通过 store.commit(type,data)调用 mutation，第一个参数为事件类型，需要和mutation中函数名称一致；第二个参数为要传递的参数。
mutation中的函数接受 state 作为其第一个参数，第二个参数是commit一个mutations中的函数时所传递的函数。
语法糖有

...mapMutations(['cartAdd']),

5.4actions

action 主要用来操作所有的异步请求。
action 不能直接对State 中的数据进行操作，只能通过commit(type,data) 方法调用 mutation。
action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
通过 store.dispatch(type)方法触发action，参数为事件类型，需要和action中函数名称一致。

以上就是vue2.0组件间参数传递的常用内容，仅供参考