vue所有组件通信方式案例

Vue中的组件通信有多种方式，下面列举几种常用的方式：

1. 父组件向子组件传递数据

父组件通过props向子组件传递数据，子组件通过props接收数据。代码示例：

// 父组件
<template>
  <div>
    <child :message="msg"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

// 子组件 Child.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

2. 子组件向父组件传递数据

子组件通过$emit向父组件传递数据，父组件通过监听子组件的事件来接收数据。代码示例：

// 子组件 Child.vue
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('send-message', 'Hello World!')
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child @send-message="handleMessage"></child>
    <div>接收到的消息: {{ message }}</div>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleMessage(message) {
      this.message = message
    }
  }
}
</script>

3. 兄弟组件之间的通信

兄弟组件之间的通信可以通过一个空的Vue实例作为中央事件总线来实现。代码示例：

// event-bus.js
import Vue from 'vue'
export default new Vue()

// 组件 A
<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
import EventBus from './event-bus.js'

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('send-message', 'Hello World!')
    }
  }
}
</script>

// 组件 B
<template>
  <div>{{ message }}</div>
</template>

<script>
import EventBus from './event-bus.js'

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    EventBus.$on('send-message', message => {
      this.message = message
    })
  }
}
</script>

通过以上三种方式，我们可以实现不同组件之间的通信。