vue provide inject 例子

Vue.js 提供了 provide 和 inject 功能来跨越组件层级传递数据。这对于跨越多个组件层级注入值非常有用，而无需手动一层层传递 props。下面是一个简单的 provide 和 inject 的使用示例。

首先，我们创建一个父组件，并在这个组件中使用 provide 方法来提供一些值：

// ParentComponent.vue
<template>
  <div>
    <ChildComponent msg="Hello from parent!" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  provide() {
    return {
      message: 'This is a provided message',
    };
  },
};
</script>

接下来，我们在子组件中使用 inject 属性来接收这个值：

// ChildComponent.vue
<template>
  <div>
    <p>{{ injectedMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ['injectedMessage'],
  created() {
    console.log('Injected Message:', this.injectedMessage);
  },
};
</script>

在这个例子中，ParentComponent 使用 provide 方法提供了一个名为 message 的值。然后在 ChildComponent 中，我们通过 inject 接收这个值，并将其命名为 injectedMessage。这样，即使 ChildComponent 没有直接从 ParentComponent 接收任何 props，它仍然可以访问到提供的 message。

需要注意的是，在 Vue 3 中，provide 和 inject 的 API 稍微有所不同，它们现在返回的是函数而不是对象。因此，在 Vue 3 中，上面的代码将变为：

// For Vue 3 ParentComponent.vue
export default {
  setup() {
    const message = 'This is a provided message';
    provide('message', message);
  },
};

// For Vue 3 ChildComponent.vue
export default {
  setup(_, { inject }) {
    const injectedMessage = inject('message');
    console.log('Injected Message:', injectedMessage);
  },
};

以上就是在 Vue.js 中使用 provide 和 inject 的简单示例。请确保在实际项目中根据具体需求调整代码，并考虑性能和可维护性的影响。