Vue コンポーネント通信に関する一般的な問題と解決策

<template>
  <div>
    <child-component :data="data"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  data() {
    return {
      data: 'Hello, Vue!'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

<template>
  <div>
    <p>{{ data }}</p>
  </div>
</template>

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

<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  methods: {
    handleChildEvent(data) {
      console.log(data) // 打印子组件传递过来的数据
    }
  },
  components: {
    ChildComponent
  }
}
</script>

<template>
  <div>
    <button @click="emitEvent">触发事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('child-event', 'Hello, Parent!') // 触发自定义事件，并将数据传递给父组件
    }
  }
}
</script>

<!-- EventBus.js -->
<script>
import Vue from 'vue'
export default new Vue()
</script>

<template>
  <div>
    <button @click="emitEvent">触发事件</button>
  </div>
</template>

<script>
import EventBus from './EventBus.js'

export default {
  methods: {
    emitEvent() {
      EventBus.$emit('custom-event', 'Hello, Component B!') // 在事件总线上触发自定义事件，传递数据给组件B
    }
  }
}
</script>

<template>
  <div>
    <p>{{ data }}</p>
  </div>
</template>

<script>
import EventBus from './EventBus.js'

export default {
  data() {
    return {
      data: ''
    }
  },
  mounted() {
    EventBus.$on('custom-event', (data) => { // 在事件总线上监听自定义事件，接收来自组件A的数据
      this.data = data
    })
  }
}
</script>