Vue3依赖注入

原创已于 2023-05-12 16:02:50 修改 · 427 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2023-05-09 19:33:54 首次发布

Vue3使用provide和inject实现父组件向子组件的数据传递，可以在全局或组件层级进行注入。子组件通过inject接收并使用父组件提供的数据，当有全局和局部注入冲突时，优先使用最近父组件的数据。

Vue3依赖注入

vue3中数据的依赖注入是通过provide和inject实现的，provide负责在父级组件中提供一个要传递给子组件的值，inject负责在子组件中接收父组件提供的值。

父子组件传参

父组件通过provide提供值

<script>
import { provide, reactive } from 'vue'
import Child from './components/Child.vue'
export default {
  components: { Child },
  setup() {
    const obj = reactive({ name:'高启强' })

    // 将obj提供给所有子组件使用
    provide('name', obj.name)
  }
}
</script>

子组件通过inject接收值

<script>
import { inject } from 'vue'
export default {
  setup() {
    const name = inject('name')

    console.log(name);  // 高启强
  }
}
</script>

全局公共注册

如果想要注册全局任何组件都可以用的数据，可以通过app.provide进行全局注入。如果父组件和全局中有名称一样的数据注入时，会使用和当前组件最近的父组件中的数据。

在全局中通过app.provide注入数据

mian.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// 通过app.provide注入
app.provide('appVersion', '1.0.0')
app.provide('appName', '京海市监狱管理系统')

app.mount('#app')

在父组件中通过provide注入数据

App.vue

<script>
import { provide } from 'vue'
import Child from './components/Child.vue'
export default {
  components: { Child },
  setup() {
    // 将obj提供给所有子组件使用
    provide('appVersion', '2.0.0')
  }
}
</script>

在子组件中通过inject获取数据

src/components/Child.vue

<script>
import { inject } from 'vue'
export default {
  setup() {
    const appVersion = inject('appVersion')
    const appName = inject('appName')
		
    console.log(appName);     // 京海市监狱管理系统
    // 如果父组件和全局中有名称一样的数据注入时，会使用和当前组件最近的父组件中的数据
    console.log(appVersion);  // 2.0.0 
  }
}
</script>