Vue 兄弟组件通信

Vue兄弟通信

定义A组件

<template>
<div>
  <p>A组件</p>
  <div>{{val}}</div>
  <button @click="btn">A组件按钮</button>
</div>
</template>

<script>
import event from '@/views/event/eventbus'
export default {
  name: "A",
  data(){
    return{
      ws:'我是A组件',
      val:null
    }
  },
  created () {
    event.$on('eventFn',(res)=>{
      this.val = res
    })
  },
  updated () {
    console.log(this.val)
    if(this.val>=3){
      event.$emit('stopTime',false)
  }
  },
  methods:{
  }
}
</script>

<style scoped>

</style>

定义组件B

<template>
  <div>
    <p>B组件</p>
    <div>{{val}}</div>
    <button @click="btn">B组件按钮</button>
  </div>
</template>

<script>
import event from '@/views/event/eventbus'
export default {
  name: 'B',
  data(){
    return {
      ws: '我是B组件',
      val:null,
      time:null
    }

  },
  created () {
    this.time = setInterval(()=>{
      event.$emit('eventFn',this.val++)
    },1000)
    console.log(this.val)
  },
  updated () {
    event.$on('stopTime',(res)=>{
      if(!res){
        clearInterval(this.time)
      }
    })
  },
  methods:{
    btn () {
      console.log('触发')
      event.$emit('eventFn',this.ws)
    }
  }
}
</script>

<style scoped>

</style>

定义事件总线:eventbus

import Vue from 'vue'
export default new Vue