vue3中使用provide/inject

父组件

<template>
  <hello-world/>
  <button @click="changeMessage">按钮</button>
</template>
<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import {provide, ref} from "vue";

const messages = ref("消息提示")
provide("messages",messages)
function changeMessage() {
  messages.value = "改变消息" +  Math.random()
  console.log(messages.value)
}


</script>
<style scoped lang="scss">

</style>

子组件

<script setup lang="ts">
import {inject, ref} from 'vue'
import LittlePage from "./little-page.vue";
const messages = inject("messages")
defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
  {{messages}}
  <little-page/>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

孙组件

<template>
<h1>{{message}}</h1>
</template>

<script setup lang="ts">
import {inject} from "vue";

const message = inject("messages")
</script>

<style scoped lang="less">

</style>

 可以穿用ref和reactive定义响应式的对象；可以用watch监听到数据得变化；除了第一次进入页面，新旧数值不一样，后面都一样；

缺点：跟踪溯源。