Vue3 依赖注入 provide() inject()

依赖注入就是父组件向后代组件传递数据，可以向子组件传递数据，也可以向孙子组件传递数据。

在父组件中使用provide()函数，向后代传递数据。

在后代组件中使用inject()函数，获取传递过来的数据。

 

provide()​

提供一个值，可以被后代组件注入。

inject()​

注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。

 

src\views\HomeView.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<template>     <div class="home">         <input type="text" v-model="msg">         <HelloWorld/>     </div> </template>   <script setup>     import HelloWorld from '@/components/HelloWorld.vue'     import {provide, ref} from 'vue'       var msg = ref(1);     provide('msg', msg)   </script>

src\components\HelloWorld.vue

?

1 2 3 4 5 6 7 8 9 10 11 12

<template>     <span>         <p>接受父组件数据: {{msg}}</p>     </span> </template>   <script setup>     import {inject} from "vue"       var msg = inject("msg")   </script>