vue-07(高级组件通信模式：provide+inject)

高级组件通信模式：provide/inject

Vue.js 中的 provide/inject 机制为组件通信提供了比 props 和自定义事件更强大的替代方案，尤其是在处理深层嵌套组件时。它允许父组件向所有子组件"提供"数据或方法，无论组件树有多深。这避免了需要手动通过多层组件传递 props，简化了代码并提高了可维护性。虽然 props 和事件适合直接的父子通信，但 provide/inject 擅长实现组件树中远亲之间的通信。

理解 `provide` 和 `inject`

provide 和 inject 选项在 Vue 组件中用于实现这种模式。provide 选项允许父组件将其数据或方法提供给其子组件。inject 选项允许子组件接收提供的数据或方法。

`provide` 选项

provide选项可以在组件中使用两种不同的方法来定义：

对象语法： 你可以直接提供一个对象，其中键是你想要用于注入的名称，值是你想要提供的数据或方法。
函数语法： 你可以提供一个返回对象的函数。当你需要提供依赖于组件状态的数据时，这很有用。

对象语法示例

html 复制代码

<template>
  <div>
    <p>Providing a message to descendants.</p>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  provide: {
    message: 'Hello from the parent!'
  }
};
</script>

在这个例子中，父组件提供了一个与键 message 关联的字符串值。

函数语法示例

html 复制代码

<template>
  <div>
    <p>Providing a dynamic message to descendants.</p>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dynamicMessage: 'Initial message'
    };
  },
  provide() {
    return {
      message: this.dynamicMessage,
      updateMessage: this.updateDynamicMessage
    };
  },
  methods: {
    updateDynamicMessage(newMessage) {
      this.dynamicMessage = newMessage;
    }
  }
};
</script>

这里，provide 选项是一个返回对象的函数。提供的 message 取决于组件的 dynamicMessage 数据属性。此外，还提供了一个方法 updateMessage，允许子组件调用此方法来更新父组件的状态。

`inject` 选项

inject 选项用于后代组件接收祖先组件提供的数据或方法。它可以被定义为字符串数组或对象。

数组语法示例

html 复制代码

<template>
  <div>
    <p>Message from parent: {{ message }}</p>
  </div>
</template>

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

在这个例子中，子组件注入了由父组件提供的 message。注入的 message 可以在组件的模板中使用。

对象语法示例

对象语法提供了对注入过程的更多控制。您可以指定默认值或要求提供的值必须存在。

html 复制代码

<template>
  <div>
    <p>Message from parent: {{ message }}</p>
    <p v-if="config">Config value: {{ config.apiURL }}</p>
    <p v-else>Config not provided.</p>
  </div>
</template>

<script>
export default {
  inject: {
    message: {
      from: 'message', // Optional: specify the key to inject from
      default: 'Default message'
    },
    config: {
      from: 'appConfig',
      default: null
    }
  }
};
</script>

在这个例子中：

message被注入。如果没有提供message ，则使用Default值'Default message'。from 属性是可选的，允许你注入一个与提供名称不同的属性。
config从 appConfig 被注入。如果没有提供 appConfig，则使用Default值 null。

响应性

理解响应性如何与 provide/inject 配合工作很重要。如果你提供一个原始值（字符串、数字、布尔值），它将不会是响应性的。如果你提供一个对象或方法，对象属性的变化或对方法的调用会反映在注入的组件中。

为了保持与原始值的响应性，你应该提供一个响应式对象（例如，使用来自组合式 API 的 ref 或 reactive），或者一个计算属性。

示例包含 `ref`

html 复制代码

// Parent component
<template>
  <div>
    <p>Providing a reactive message to descendants.</p>
    <input v-model="message" type="text">
    <child-component></child-component>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello from the parent!');
    return {
      message
    };
  },
  provide() {
    return {
      message: this.message
    };
  }
};
</script>

// Child component
<template>
  <div>
    <p>Message from parent: {{ message }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    return {
      message
    };
  }
};
</script>

在这个例子中，父组件提供了一个名为 ref 的 message。子组件注入这个 ref。父组件中对 message 的任何更改将自动反映在子组件中，反之亦然，如果子组件修改了 ref。

实用示例与演示

让我们考虑一个场景，其中你有一个表示配置表单的深度嵌套组件结构。根组件包含应用程序配置，而你希望将此配置提供给各种嵌套组件，而无需通过 props 向下传递。

场景：配置表单

想象一个包含多个嵌套组件的复杂配置表单：

App：包含应用程序配置的根组件。
Section : 代表配置表单中的一个部分的组件。
SubSection : 代表章节内一个子节的一个组件。
ConfigInput: 代表特定配置设置输入字段的组件。

如果没有 provide/inject，你需要将配置对象作为 props 通过组件树的每一层传递。有了 provide/inject，你可以直接将配置对象注入到 ConfigInput 组件中。

App.vue (根组件)

html 复制代码

<template>
  <div>
    <h1>Application Configuration</h1>
    <section-component></section-component>
  </div>
</template>

<script>
import { reactive } from 'vue';
import SectionComponent from './components/SectionComponent.vue';

export default {
  components: {
    SectionComponent
  },
  setup() {
    const config = reactive({
      apiURL: 'https://api.example.com',
      theme: 'light',
      itemsPerPage: 20
    });

    return {
      config
    };
  },
  provide() {
    return {
      appConfig: this.config
    };
  }
};
</script>

SectionComponent.vue

html 复制代码

<template>
  <div>
    <h2>Section</h2>
    <sub-section-component></sub-section-component>
  </div>
</template>

<script>
import SubSectionComponent from './SubSectionComponent.vue';

export default {
  components: {
    SubSectionComponent
  }
};
</script>

SubSectionComponent.vue

html 复制代码

<template>
  <div>
    <h3>Sub Section</h3>
    <config-input label="API URL" configKey="apiURL"></config-input>
    <config-input label="Theme" configKey="theme"></config-input>
  </div>
</template>

<script>
import ConfigInput from './ConfigInput.vue';

export default {
  components: {
    ConfigInput
  }
};
</script>

ConfigInput.vue

html 复制代码

<template>
  <div>
    <label>{{ label }}:</label>
    <input type="text" :value="config[configKey]" @input="updateConfig">
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  props: {
    label: {
      type: String,
      required: true
    },
    configKey: {
      type: String,
      required: true
    }
  },
  setup() {
    const config = inject('appConfig');

    const updateConfig = (event) => {
      config[this.configKey] = event.target.value;
    };

    return {
      config,
      updateConfig
    };
  }
};
</script>

在这个例子中，App 组件提供了 config 对象。ConfigInput 组件注入了 config 对象，并使用它来显示和更新配置值。在 ConfigInput 组件中做出的更改将会反映在 App 组件中，因为 config 对象是响应式的。

vue-07(高级组件通信模式：provide+inject)

高级组件通信模式：provide/inject

理解 provide 和 inject

provide 选项

对象语法示例

函数语法示例

inject 选项

数组语法示例

对象语法示例

响应性

示例包含 ref

实用示例与演示

场景：配置表单

App.vue (根组件)

SectionComponent.vue

SubSectionComponent.vue

ConfigInput.vue

理解 `provide` 和 `inject`

`provide` 选项

`inject` 选项

示例包含 `ref`