1.父子組件

通常父子組件間我們使用props傳值，方式如下

1.1父?jìng)髯?/h3>

父組件

<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: {
      //以下數(shù)據(jù)皆為選填數(shù)據(jù)
      type: 'String',    // 驗(yàn)證傳來(lái)值的數(shù)據(jù)類型 
      default: '' ,    //父組件如果沒(méi)有傳值首繁，就取這個(gè)默認(rèn)值；如果說(shuō)是一個(gè)數(shù)組或者對(duì)象障斋，需要寫(xiě)成函數(shù)形式
      required: true/false ,   // true--必須傳的
      validator:function(val){         // v是父組件的數(shù)據(jù)可以對(duì)傳入的值進(jìn)行自定義的校驗(yàn)通過(guò)添加一個(gè)validator函數(shù)進(jìn)行數(shù)據(jù)的校驗(yàn)酌住，如果函數(shù)返回false,則校驗(yàn)失敗叼旋，進(jìn)而報(bào)錯(cuò)
        return false                  // 驗(yàn)證失敗
        return true                  // 驗(yàn)證成功
      }
    }
    },
  data:()=>{
    return{
    
    }
  },
  methods:{

  }
}
</script>

1.2子傳父

子組件

<template>
  <div class="hello" @click="toFar">
    點(diǎn)擊
  </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

我們可以創(chuàng)建一個(gè)eventbus.js文件來(lái)作為中轉(zhuǎn)文件

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

A組件派發(fā)事件

//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組件點(diǎn)閱事件

//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
       }
 })
 
 // 對(duì)應(yīng)路由配置：
 {
     path: '/detail',
     name: 'Detail',
     component: Detail
 }
 
 // 子組件獲取參數(shù):
 this.$route.query.id

3.2params傳參

this.$router.push({
    name: 'Detail',
    params: {
       id: id
    }
 })
 
 // 對(duì)應(yīng)路由配置：
 {
     path: '/detail',
     name: 'Detail',
     component: Detail
  }
  
 // 子組件獲取參數(shù):
 this.$route.params.id

3.3params傳參且提前約定好參數(shù)

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

關(guān)于query傳參和params傳參的特點(diǎn)
query傳參
1.標(biāo)定路由時(shí)name和path都行
2.query傳參類似于get請(qǐng)求參數(shù)會(huì)處于url上
3.頁(yè)面刷新時(shí)參數(shù)不會(huì)消失
params傳參
1.標(biāo)定路由時(shí)使用name
2.請(qǐng)求參數(shù)不會(huì)處于URL上
3.頁(yè)面刷新參數(shù)會(huì)失效（除非約定好參數(shù)）

4.$refs，$parent,$children

4.1$refs

獲取的是設(shè)置ref的子組件的實(shí)例靶衍，
在子組件中

<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>

打印得到的結(jié)果是

ref對(duì)象.png

5.vuex

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它的狀態(tài)存儲(chǔ)是響應(yīng)式的涛酗。采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)铡原，也就是說(shuō)偷厦，對(duì)數(shù)據(jù)的所有操作都要在vuex中進(jìn)行。但是我們?cè)撊绾稳ナ褂媚匮嗫蹋挷欢嗾f(shuō)
先來(lái)看看vuex的基本雛形

const store = new Vuex.Store({
    state: {
        //相當(dāng)于自定義組件中的data
      count: 1,
    },
    getters:{
        //相當(dāng)于自定義組件中的computed
        dataList:(state)=>{
           //計(jì)算分頁(yè)后的數(shù)據(jù)
            
            return (state.count + 1);
        },
    },
    mutations: {
        //相當(dāng)于自定義組件中的methods只泼，只能做同步的操作
        //對(duì)state中的數(shù)據(jù)進(jìn)行修改
        increment(state) {
          state.count++
      },
    },
    actions: {
        //異步操作，例如ajax請(qǐng)求
        //使用commit 觸發(fā) mutations
    }
})

store代表倉(cāng)庫(kù)的意思卵洗，在vuex中也依舊是请唱，它存儲(chǔ)了state（狀態(tài)），getters（自定義的依賴變量）忌怎，mutations(同步操作函數(shù)集)籍滴，actions(異步操作函數(shù)集)

5.1state(狀態(tài))

state中存放定義的狀態(tài)酪夷，獲取的在頁(yè)面中獲取的方法有
this.$store.state
如果需要獲取的數(shù)據(jù)過(guò)多時(shí)我們可以使用語(yǔ)法糖

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

5.2getters(依賴狀態(tài)自定義變量)

getter 相當(dāng)于自定義組件中的computed榴啸，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算晚岭。
getter 接受 state 作為其第一個(gè)參數(shù)鸥印，也可以接受其他 getter 作為第二個(gè)參數(shù)。
可以使用this.$store.getters 訪問(wèn)這些值坦报。

5.3mutations

vuex的機(jī)制中只有mutation可以更改 Vuex 的 State 中數(shù)據(jù)库说。
通過(guò) store.commit(type,data)調(diào)用 mutation，第一個(gè)參數(shù)為事件類型片择，需要和mutation中函數(shù)名稱一致潜的；第二個(gè)參數(shù)為要傳遞的參數(shù)。
mutation中的函數(shù)接受 state 作為其第一個(gè)參數(shù)字管，第二個(gè)參數(shù)是commit一個(gè)mutations中的函數(shù)時(shí)所傳遞的函數(shù)啰挪。
語(yǔ)法糖有

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

5.4actions

action 主要用來(lái)操作所有的異步請(qǐng)求。
action 不能直接對(duì)State 中的數(shù)據(jù)進(jìn)行操作嘲叔，只能通過(guò)commit(type,data) 方法調(diào)用 mutation亡呵。
action 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象，因此你可以調(diào)用 context.commit 提交一個(gè) mutation硫戈，或者通過(guò) context.state 和 context.getters 來(lái)獲取 state 和 getters锰什。
通過(guò) store.dispatch(type)方法觸發(fā)action，參數(shù)為事件類型丁逝，需要和action中函數(shù)名稱一致汁胆。

以上就是vue2.0組件間參數(shù)傳遞的常用內(nèi)容，僅供參考