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

相关推荐
極光未晚3 分钟前
乾坤微前端项目:前端处理后台分批次返回的 Markdown 流式数据
前端·vue.js·面试
用户84298142418103 分钟前
Auto.js脚本加密
javascript
用户6600676685394 分钟前
用 CSS3 导演一场星际穿越:复刻“星球大战”经典片头
前端·css
程序员鱼皮4 分钟前
前后端分离,千万别再搞错了!
java·前端·后端·计算机·程序员·编程·软件开发
前端赵哈哈5 分钟前
Vite 构建后产品详情页图片失效?从路径匹配到映射表的完美解决
前端·vue.js·vite
葡萄城技术团队5 分钟前
React Native 错误处理完全指南
前端
苏打水com6 分钟前
深入浅出 JavaScript 异步编程:从回调地狱到 Async/Await
开发语言·javascript·ecmascript
Giant1006 分钟前
教你用几行代码,在网页里调出前置摄像头!
javascript
地方地方8 分钟前
event loop 事件循环
前端·javascript·面试
AAA阿giao8 分钟前
不用 JavaScript,你能用 CSS 做到什么?答案:拍一部星战电影!
前端·css