Provide Inject

provide и inject — это механизм в Vue для передачи данных от родительского компонента к глубоко вложенным дочерним компонентам, минуя промежуточные компоненты (пропуская "props drilling").

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// App.vue<script setup>import { ref, provide } from 'vue'  import Comp from './Comp.vue'  let count = ref(10)  provide('count', count)</script>  <template>  <Comp /></template>

1
2
3
4
5
6
7
8
// Comp.vue<script setup>import { inject } from 'vue';  const count = inject('count')</script>  <template>{{count}}</template>