vue2和vue3中依赖注入provide 和 inject是如何使用的具体案例

JackieDYH2024-10-25 10:00

Vue2中provide 和 inject使用案例：

父组件中通过provide提供一个字符串参数：

javascript 复制代码

<template>
  <div>
    <child-component />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  provide: {
    message: 'hello world'
  }
}
</script>

子组件中通过inject注入父组件中的字符串参数：

javascript 复制代码

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

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

Vue3中provide 和 inject使用案例：

父组件中通过provide提供一个字符串参数：

javascript 复制代码

<template>
  <div>
    <child-component />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    provide('message', 'hello world')
  }
}
</script>

子组件中通过inject注入父组件中的字符串参数：

javascript 复制代码

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

<script>
import { inject } from 'vue'

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

在Vue3中，provide和inject实现起来更加简单，只需要在setup函数中使用即可，而不需要在组件声明中使用。同时，Vue3也支持provide和inject的类型声明，在开发时更加方便。