依赖注入（多层传递） provide和inject

父组件

import {provide} from 'vue'
provide('message',{name:'张三','age':'18'})
    //禁止修改数据
  //provide('message', readonly({name:'张三','age':'18'}))

孙子组件

<template>
   <div>
     <p> <span>姓名：{{ data.name }}</span></p>
     <p> <span>年龄：{{ data.age }}</span></p>
  </div>
</template>
<script setup>
import { inject } from 'vue';
const data = inject('message')
</script>

截图

image.png

和响应式数据配合使用（提供修改数据方法）

父组件

    const infor = {name:'张三',age:18};
    function changeAge() {
      infor.age = 19;
    }
    provide('infor', {infor,changeAge})

子组件

<div>
   <p> <span>姓名：{{ infor.name }}</span></p>
   <p> <span>年龄：{{ infor.age }}</span></p>
   <button @click="changeAge()">增加</button>
   </div>
<script setup>
import { inject } from 'vue';
const { infor, changeAge } = inject('infor')
</script>