Vue3 - 依赖注入

依赖注入

• 跨组件通信的方式，主要解决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>