浅谈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()