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

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的类型声明,在开发时更加方便。

相关推荐
Winson℡1 小时前
React Native 中的 useCallback
javascript·react native·react.js
wyzqhhhh1 小时前
less和sass
前端·less·sass
Nan_Shu_6143 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel4 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
谢尔登4 小时前
【Nest】基本概念
javascript·node.js·express
老华带你飞4 小时前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
前端小白从0开始4 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible4 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫5 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评5 小时前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5