Vue3全局组件通信之provide / inject详解

当我们开发Vue3应用时，有时候会需要在多个组件之间进行数据传递，这时候就需要用到全局组件通信。Vue3中提供了两种方式进行全局组件通信，一种是provide / inject，另一种是Vuex状态管理，本文主要介绍前者。

一、provide / inject说明

provide / inject是Vue3中提供的API，用于在父组件中提供数据，然后在子组件中进行注入，以达到共享数据的目的。它们的使用分别如下：

// 在父组件中 provide 对象
const app = createApp({
  data() {
    return {
      message: "hello world"
    }
  },
  provide: {
    message: this.message
  },
  ...
})

// 在子组件中 inject 对象
const appChild = {
  inject: ['message'],
  ...
}

二、provide / inject用法示例

示例一: 父组件向子组件传递数据

<!-- 父组件 -->
<template>
  <div>
    <h2> Parent Component </h2>
    <hr>
    <p>Message from parent: {{ message }} </p>
    <hr>
    <ChildComponent></ChildComponent>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    provide() {
      return {
        message: "Hello from parent component"
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <div>
    <h2> Child Component </h2>
    <hr>
    <p>Message from parent: {{ message }}</p>
    <hr>
  </div>
</template>

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

在这个示例中，父组件提供了一个名为message的数据，然后在子组件中通过inject获取到该数据。这样子组件就可以使用父组件提供的数据，而不需要使用props进行传递。

示例二: 子组件可以修改父组件数据

<!-- 父组件 -->
<template>
  <div>
    <h2> Parent Component </h2>
    <hr>
    <p>Message from parent: {{ message }} </p>
    <button @click="onClick"> Change Message in Child Component </button>
    <hr>
    <ChildComponent></ChildComponent>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        message: "Hello from parent component"
      }
    },
    provide() {
      return {
        message: this.message,
        showMessage: this.showMessage
      }
    },
    methods: {
      showMessage(msg) {
        this.message = msg
      },
      onClick() {
        this.showMessage("The message has been changed by child component")
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <div>
    <h2> Child Component </h2>
    <hr>
    <button @click="onClick">
      Change message in parent component
    </button>
  </div>
</template>

<script>
  export default {
    inject: ['message', 'showMessage'],
    methods: {
      onClick() {
        this.showMessage("The message has been changed by child component")
      }
    }
  }
</script>

在这个示例中，父组件中提供了一个名为showMessage的方法，该方法可以用来修改父组件中的message数据，子组件通过inject获取到该方法，然后可以在点击按钮时，调用该方法修改父组件的message数据。通过这样的方式，子组件就可以更新父组件中的数据，实现了组件之间的互动。

以上就是本文对于“Vue3全局组件通信之provide / inject详解”的完整攻略，如果您在Vue3开发中需要实现全局组件通信，可以参考此文提供的方法进行开发。