依赖注入
- 跨组件通信的方式,主要解决prop逐级透传的问题
- 只要祖先通过provide提供值之后,在他的后代组件都可以注入祖先提供的数据
provide
-
在Vue3中如果使用
<script setup>
,则直接使用provide()函数就行,如果不使用的话就得在setup()中进行调用provide() -
// 使用<script setup> <script setup> import { provide } from 'vue' provide(/* 注入名 */ 'message', /* 值 */ 'hello!') </script> // 不使用<script setup> import { provide } from 'vue' export default { setup() { provide(/* 注入名 */ 'message', /* 值 */ 'hello!') } }
-
除了在一个组件中提供依赖之外,还可以在整个引用层提供依赖
-
import { createApp } from 'vue' const app = createApp({ }) app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
inject
-
如果某个后代组件需要provide提供的值,只需要通过inject(‘注入数据名’)即可
-
如果祖先没传入你要注入的值,我们可以设置默认值
-
const value = inject('message', '这是默认值')
和响应式数据配合使用
-
<!-- provide数据提供组件 --> <template> <div> <!-- 引入儿子组件 --> <Son></Son> </div> </template> <script setup> import { provide, readonly, ref } from 'vue' import Son from './components/SonComponent/Son.vue' // 定义了一个响应式数据message let message = ref('hello my grandSon!') // 修改响应式数据message的函数 // 建议尽可能将任何对响应式状态的变更都保持在供给方组件中, // 这样可确保提供状态的声明和变更操作都内聚在同一个组件中,更容易维护 const changeData = () => { message.value = '你好,孙子' } provide('message', { // 我们都通过provide将响应式数据和操作它的方法向下传递 message, changeData }) </script> <!-- 中间过渡的儿子组件 --> <template> <div> 儿子 <GrandSon></GrandSon> </div> </template> <script setup> import GrandSon from '../GrandSon/GrandSon.vue' </script> <!-- 孙子组件 --> <template> <div> 孙子 <!-- 可以拿到提供的数据,也可以调用提供的方法取修改数据 --> <h3>爷爷传过来的消息:{ { message }}</h3> <button @click="changeData">修改传过来的值</button> </div> </template> <script setup> import { inject, provide } from "vue"; let { message, changeData } = inject('message') </script>