Vue 组件通信：无缝协作的 12 种解决方案

2023-11-28 06:30:36

1. 通过属性传递数据（props）

Props 是最简单直接的组件通信方法。您可以使用 props 将数据从父组件传递给子组件。

<template>
  <ChildComponent :message="message" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent!'
    }
  }
}
</script>

在子组件中，可以使用 props 选项接收数据：

<template>
  <p>{{ message }}</p>
</template>

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

2. 通过事件触发通信

事件是另一种常用的组件通信方式。您可以使用事件从子组件向父组件发送消息。

<template>
  <ChildComponent @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  }
}
</script>

在子组件中，可以使用 $emit 方法触发事件：

<template>
  <button @click="$emit('message', 'Hello from child!')">Send Message</button>
</template>

<script>
export default {
  methods: {
    handleMessage() {
      this.$emit('message', 'Hello from child!')
    }
  }
}
</script>

3. 通过插槽实现灵活布局

插槽允许您在子组件中定义内容的位置。这使您可以创建灵活的组件，可以根据需要进行定制。

<template>
  <ParentComponent>
    <template v-slot:header>
      <h1>Custom Header</h1>
    </template>
    <template v-slot:content>
      <p>Custom Content</p>
    </template>
  </ParentComponent>
</template>

<script>
export default {
  components: {
    ParentComponent
  }
}
</script>

在父组件中，可以使用 slot 属性指定插槽的位置：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
  </div>
</template>

<script>
export default {
  components: {
    ChildComponent
  }
}
</script>

4. 通过全局事件总线共享数据

全局事件总线是一个中央位置，用于在组件之间共享数据。这对于需要在多个组件之间共享数据的应用程序非常有用。

import Vue from 'vue'

Vue.prototype.$eventBus = new Vue()

然后，您可以在任何组件中使用 $eventBus 触发或侦听事件：

this.$eventBus.$emit('some-event', data)

this.$eventBus.$on('some-event', (data) => {
  // Do something with the data
})

5. 通过 provide/inject 传递依赖

provide/inject 是一种将数据从父组件注入子组件的方法。这对于需要在多个组件之间共享依赖非常有用。

<template>
  <ChildComponent />
</template>

<script>
export default {
  provide() {
    return {
      myService: new MyService()
    }
  }
}
</script>

在子组件中，可以使用 inject 选项注入依赖：

<template>
  <p>{{ myService.getData() }}</p>
</template>

<script>
export default {
  inject: ['myService']
}
</script>

6. 通过混入代码实现代码复用

混入代码允许您在多个组件之间共享代码。这对于需要在多个组件中使用相同代码的情况非常有用。

import MyMixin from './MyMixin.js'

export default {
  mixins: [MyMixin]
}

在 MyMixin.js 中，您可以定义要共享的代码：

export default {
  data() {
    return {
      message: 'Hello from mixin!'
    }
  }
}

7. 通过组合式 API 提高灵活性

组合式 API 是一种新的方式来管理组件状态。它允许您更灵活地组合和重用代码。

import { ref, computed } from 'vue'

export default {
  setup() {
    const message = ref('Hello from setup!')
    const reversedMessage = computed(() => message.value.split('').reverse().join(''))

    return {
      message,
      reversedMessage
    }
  }
}