vue組件通訊

被問多了，來作個總結。先約定要用到的父子和兄弟組件，接下來只貼出關鍵部分代碼：

//父組件
<template>
  <div id="app">
    <Son></Son>
  </div>
</template>

import Son from './components/son'

export default {
  name: 'app',
  components: {
    Son
  }
}
複製代碼

//子組件
<template>
    <div>
    </div>
</template>

export default {
    name: "son",
    methods:{
    }
}
複製代碼

父子組件通訊

父組件向子組件通訊

1.父組件經過v-bind綁定屬性，向子元素傳遞

//父組件內
<template>
...
    <Son :toSonMsg="toSonMsg"></Son> /*經過綁定屬性像子組件傳遞toSonMsg*/
...
</template>

export default {
...
  data(){
    return {
      toSonMsg: 'hello son'
    }
  },
...
}
複製代碼

//子組件
<template>
...
    <h2>{{toSonMsg}}</h2>
...
</template>

export default {
    ...
    props:{ //子組件經過props屬性接收註冊父組件傳遞過來的信息
        toSonMsg: String
    },
}
複製代碼

2.父組件經過refs屬性調用子組件方法

父組件經過refs來獲取子組件實例上的信息：

//父組件
<template>
...
    <Son ref="son"></Son>
    <button @click="doSonMethods">doSonMethods</button>
...
</template>

export default {
...
  methods:{
    doSonMethods(){
      this.$refs.son.changeSomMsg('father come!!!') //調用子組件的changeSomMsg方法
    },
  },
}
複製代碼

//子組件
<template>
    <div>
        <h2>{{sonMsg}}</h2>
    </div>
</template>

export default {
...
    data(){
       return {
           sonMsg: "i'm son"
       }
    },
    methods:{
        changeSomMsg(msg){
            this.sonMsg = msg
        },
    }
}
複製代碼

子組件向父組件通訊

1.@事件綁定 + $emit事件觸發

//父組件
<template>
...
    <Son :toSonMsg="toSonMsg" @getSonMsg="sonCallBack"></Son> //綁定事件
...
</template>

export default {
...
  data(){
    return {
      toSonMsg: 'hello son'
    }
  },
  methods:{
    sonCallBack(msg){  //綁定的事件
      this.toSonMsg = msg
    }
  },
}
複製代碼

//子組件
<template>
...
    <h2>{{toSonMsg}}</h2>
    <button @click="sendFather">send father</button>
...
</template>

export default {
...
    props:{
        toSonMsg: String
    },
    methods:{
        sendFather(){ //觸發綁定的getSonMsg事件
            this.$emit('getSonMsg', 'father is get!!')
        }
    }
}

複製代碼

2.v-bind事件綁定 + props註冊調用

//父組件
<template>
...
    <Son :toSonMsg="toSonMsg" :getSonMsg="sonCallBack"></Son>
...
</template>
//實例部分同上
複製代碼

//子組件
//template部分同上
export default {
...
    props: {
        toSonMsg: String,
        getSonMsg: Function

    },
    methods:{
        sendFather(){
            this.getSonMsg('father is get!!')
        }
    }
}
複製代碼

3.子組件經過$parent屬性獲取父組件實例，調用父組件方法

//父組件
<template>
...
    <Son ref="son" :toSonMsg="toSonMsg"></Son>
...
</template>

export default {
...
  data(){
    return {
      toSonMsg: 'hello son'
    }
  },
  methods:{
    fatherMethods(msg){
      this.toSonMsg = msg
    },
  },
}
複製代碼

//子組件
<template>
    <div>
        <h2>{{toSonMsg}}</h2>
        <button @click="getFather">getFather</button>
    </div>
</template>

export default {
...
    props: {
        toSonMsg: String,

    },
    methods:{
        getFather(){
            this.$parent.fatherMethods('do father methods!!!')
        },
    }
}
複製代碼

父組件和它n層子組件的通訊

provide / inject方式（不推薦）

這對選項須要一塊兒使用，以容許一個祖先組件向其全部子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。

//父組件
<template>
...
    <Son></Son>
    <button @click="changeMsg">changeMsg</button>
...
</template>

export default {
  ...
  provide(){
    return {
      msg: this.msg
    }
  },
  data(){
    return {
      msg: {
        value: 'i am from father' //provide 和 inject綁定並非可響應的。這是刻意爲之的。然而，若是你傳入了一個可監聽的對象，那麼其對象的屬性仍是可響應的。因此要講變更的數據寫成傳入的對象的屬性。
      }
    }
  },
  methods:{
    changeMsg(){
      this.msg.value = 'father change!'
    }
  }
}

複製代碼

//子組件
<template>
...
    <h2>{{msg.value}}</h2>
...
</template>

export default {
...
    inject: ['msg']
}
複製代碼

兄弟組件通訊方式

先要new一個vue的實例看成他們之間的橋，經過新的實例上的on和emit方法進行通訊。

//son和son1是兄弟組件，咱們須要在新建的bus.js中暴露一個vue的實例
//bus.js
import Vue from 'vue'
export default new Vue()
複製代碼

//son
<template>
...
    <h2>{{sonMsg}}</h2>
...
</template>

import bus from '../assets/js/bus'
export default {
        name: "son",
    data(){
       return {
           sonMsg: "i'm son0!"
       }
    },
    created(){
        bus.$on('changMsg', msg=>{ //監聽changMsg事件
            this.sonMsg = msg
        })
    },
}
複製代碼

//son1
<template>
    <button @click="changSon0">changSon0</button>
</template>

import bus from '../assets/js/bus'
export default {
    name: "son1",
    methods:{
        changSon0(){
            bus.$emit('changMsg', 'son1 change son0!!!!!!') //觸發bus上的changMsg事件
        }
    }
}
複製代碼