provide/inject — pass data through component tree without props drilling. props — direct parent-to-child data passing.
provide/inject:
1<!-- Parent -->2<script setup>3import { provide, ref } from "vue"45const theme = ref("dark")6provide("theme", theme) // reactive7provide("appName", "MyApp") // static8</script>910<!-- Deep child (no props needed) -->11<script setup>12import { inject } from "vue"1314const theme = inject("theme")15const appName = inject("appName")16const fallback = inject("missing", "default")17</script>
Props:
1<!-- Parent -->2<Child :theme="theme" :name="appName" />34<!-- Child -->5<script setup>6const props = defineProps<{ theme: string; name: string }>()7</script>
When to use: