<template> <div class="s">底层组件</div> <div>来自顶层的响应式数据：{{ data }}</div> <button @click="setData">修改顶层数据</button> </template> <script setup lang='ts'> import {inject} from 'vue'; const data = inject('key') const setData = inject('key1') </script> <style> </style>

这是一个 Vue 3 的单文件组件，使用了 `<script setup>` 语法，可以更简洁地定义组件的逻辑部分。在这个组件中，使用了 `inject` 函数来从顶层组件中获取响应式数据 `data` 和修改数据的函数 `setData`。其中，`inject` 函数的第一个参数是一个 key，表示要获取的属性在顶层组件中的名字，第二个参数是一个默认值，在顶层组件中不存在该属性时会使用默认值。在这个组件中，`inject` 函数的第一个参数是 `'key'`，表示要获取的属性在顶层组件中的名字是 `'key'`，而第二个参数没有指定，表示在顶层组件中不存在 `'key'` 属性时不会有默认值。同理，`inject` 函数的第一个参数是 `'key1'`，表示要获取的属性在顶层组件中的名字是 `'key1'`，而第二个参数同样没有指定，表示在顶层组件中不存在 `'key1'` 属性时不会有默认值。最后，这个组件输出了一个 `<div>` 标签和一个 `<button>` 标签，分别用来展示从顶层组件中获取的响应式数据和调用从顶层组件中获取的修改数据函数。