Vue3 依赖注入 provide() inject()

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

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

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

 

provide()​

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

inject()​

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

 

src\views\HomeView.vue

<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

<template>
	<span>
		<p>接受父组件数据: {{msg}}</p>
	</span>
</template>

<script setup>
    import {inject} from "vue"

	var msg = inject("msg")

</script>