淺談vue組件通信

以下文章淺談以下vue組件之間的通信，

props

props主要是父組件向子組件傳值，以下爲使用方法

//父組件Home 子組件S1 
//父組件通過綁定屬性的方式向子組件傳遞數據
//子組件通過props來接收
//以下爲父組件Home的代碼
<template>
  <div class="home">
    以下爲組件S1的內容
    <S1 :s1Data='s1Data'/>
  </div>
</template>

<script>
import S1 from '@/components/s1.vue'
export default {
  name: 'Home',
  data(){
    return{
      s1Data:'這是Home組件傳給組件S1的內容'
    }
  },
  components: {
    S1,
  }
}
</script>
//以下爲子組件S1的代碼
<template>
  <div>
      s1
      <br/>
      {{s1Data}}
  </div>
</template>

<script>
export default {
    props:['s1Data']
}
</script>

<style>

</style>

結果：

$emit

子組件向父組件傳值主要是通過事件，以下是使用方法

//以下是父組件Home的代碼
<template>
  <div class="home">
    以下爲組件S1的內容
    <S1 @toParentEvent='recData'/>
    {{s1ToHomeData}}
  </div>
</template>
<script>
import S1 from '@/components/s1.vue'
export default {
  name: 'Home',
  data(){
    return{
      s1ToHomeData:''
    }
  },
  components: {
    S1,
  },
  methods:{
    recData(data){
      this.s1ToHomeData = data
    }
  }
}
</script>
//以下是子組件S1的代碼
<template>
  <div>
      s1
      <br/>
      <button @click="toParent" >向父組件傳值</button>
  </div>
</template>

<script>
export default {
    data(){
        return{
            data:'我是組件S1的數據'
        }
    },
    methods:{
        toParent(){
            this.$emit('toParentEvent',this.data)
        }
    }
}
</script>

<style>

</style>

點擊按鈕後，子組件向父組件傳值

自定義事件

自定義事件主要是兄弟組件之間傳值，主要是通過Vue的$emit和$on，記得在定義事件後再組件銷燬前通過$off解綁事件。
條件：

1. 一個新的vue實例
2. 各個兄弟共用同一個事件機制

//父組件
<template>
  <div class="home">
    以下爲組件S1的內容
    <S1 />
    <hr />
     以下爲組件S2的內容
    <S2/>
    <hr />
  </div>
</template>
<script>
import S1 from '@/components/s1.vue'
import S2 from '@/components/s2.vue'
export default {
  name: 'Home',
  components: {
    S1,
    S2
  },
}
</script>
//兄弟組件S1
<template>
  <div>
      s1
      <br/>
      <button @click="toS2" >向組件S2傳值</button>
  </div>
</template>
<script>
import {vm} from '@/vm.js'
export default {
    data(){
        return{
            data:'我是組件S1的數據'
        }
    },
    methods:{
        toS2(){
            vm.$emit('toS2Event',this.data)
        }
    },
    beforeDestroy(){
        vm.$off('toS2Event')
    }
}
</script>

//兄弟組件S2
<template>
  <div>
      s2
      {{s1ToS2Data}}
  </div>
</template>

<script>
import {vm} from '@/vm.js'
export default {    
    data(){
        return{
            s1ToS2Data:''
        }
    },
   mounted(){
       vm.$on('toS2Event',(data)=>{
           this.s1ToS2Data = data
       })
   }
}
</script>

vm.js

import Vue from 'vue'
export var vm = new Vue()