Vite 使用inject/provide

简介: Vite 使用inject/provide

父级组件

<template>
<div>
    <div   @click="changeVlaue()"> 点击改变</div>
    
</div>
</template>
import {
  reactive,
  provide,
  ref
} from 'vue'
 setup() {
    const type= ref("business"); //加上响应式,加上后父组件改变此值所有子组件的值都会跟着变
    //const type= "business"; //不加响应式,父组件调用了changeVlaue改变值后,子组件不会跟着一起改变
    //const type= reactive({type:"business"}); //另一种响应式,用哪种都行,只是取值的方式不一样
    provide('AssetsType', type)
    const methods = {
     changeVlaue: () => {
        type.value='我改变了'
      },
    }
    return {
      ...toRefs(methods),
      type
    }
 
}

子组件

<template>
<div>
    <div> {{AssetsType}}</div>
    <div> {{test}}</div>
</div>
</template>
import {
  reactive,
  inject,
} from 'vue'
 
setup() {
    //用法一
     const test = inject('AssetsType')
    //用法二
    const state: any = reactive({
      AssetsType:inject('AssetsType')
    })
return {
      ...toRefs(state),
      test
    }
 
}


相关文章
|
7月前
|
JavaScript
Vue中的provide和inject适用于哪些场景?
Vue中的provide和inject适用于哪些场景?
108 0
|
7月前
|
JavaScript
Vue中的provide和inject的使用场景是什么?
Vue中的provide和inject的使用场景是什么?
205 3
|
7月前
|
JavaScript 开发者
Vue中provide和inject的作用是什么?
Vue中provide和inject的作用是什么?
88 0
|
20天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
32 1
|
20天前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
21 1
|
2月前
|
API
vue3知识点:provide 与 inject
vue3知识点:provide 与 inject
36 4
vue3知识点:provide 与 inject
|
3月前
实际项目中如何选择 Provide / Inject 和 Vuex?
实际项目中如何选择 Provide / Inject 和 Vuex?
124 63
|
7月前
|
设计模式 JavaScript API
依赖注入:使用provide/inject在Vue中管理依赖
【4月更文挑战第23天】Vue.js的依赖注入设计模式通过provide/inject API减少组件耦合,提高代码可维护性和测试性。provide选项在父组件中定义要共享的属性,inject则在子组件中接收这些属性。依赖注入适用于跨组件数据共享、插件开发和高阶组件。然而,应谨慎使用以保持代码清晰。
46 2
|
7月前
|
JavaScript
VUE组件: Vue中的provide和inject是用来做什么的?
VUE组件: Vue中的provide和inject是用来做什么的?
105 0
|
JavaScript API
vue组件通讯之provide / inject
vue组件通讯之provide / inject
66 0

热门文章

最新文章