provide和inject的使用

简介: provide和inject的使用

根组件:

<script>
import { provide } from 'vue'
export default {
  setup(){
    provide('name','xiaoming')
  }
</script>

后代组件:

<script>
import { inject } from 'vue'
export default {
  setup(){
    let myName= inject('name')
    console.log(myName)  //xiaoming
  }
}
</script>


相关文章
|
7月前
|
JavaScript
Vue中的provide和inject适用于哪些场景?
Vue中的provide和inject适用于哪些场景?
100 0
|
7月前
|
JavaScript 开发者
Vue中provide和inject的作用是什么?
Vue中provide和inject的作用是什么?
74 0
|
7月前
|
JavaScript
鬼火起~为什么报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the
鬼火起~为什么报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the
|
1天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
9 1
|
1天前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
9 1
|
5月前
|
设计模式 JavaScript
inject
【7月更文挑战第17天】
107 15
|
7月前
Vite 使用inject/provide
Vite 使用inject/provide
94 0
|
7月前
|
JavaScript
解决报错did you register the component correctly? For recursive components, make sure to provide the “na
解决报错did you register the component correctly? For recursive components, make sure to provide the “na
|
7月前
|
JavaScript
提供一个具体的示例来说明`provide`和`inject`的用法。
提供一个具体的示例来说明`provide`和`inject`的用法。
32 0
|
7月前
|
JavaScript
[Vue warn]: Method “components“ has type “object“ in the component definition. Did you reference the
[Vue warn]: Method “components“ has type “object“ in the component definition. Did you reference the