В Vue 3 существует несколько способов передачи данных из родительского компонента в дочерний. Вот некоторые из них:
1. С помощью пропсов (props):
Это наиболее распространенный способ передачи данных в дочерний компонент во Vue. Вы можете определить пропсы в родительском компоненте и передать значения в них при использовании дочернего компонента.
В родительском компоненте:
<template>
<div>
<child-component :data="parentData"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentData: 'Данные из родительского компонента'
};
}
}
</script>
В дочернем компоненте:
<template>
<div>
{{ data }} <!-- Вывод переданых данных из родительского компонента -->
</div>
</template>
<script>
export default {
props: {
data: {
type: String,
required: true
}
}
}
</script>
В этом примере мы определяем пропс "data" в дочернем компоненте с типом String и обязательным требованием. Затем мы передаем значение "parentData" из родительского компонента в компонент "child-component" с помощью синтаксиса "v-bind" (:).
2. С помощью контекста (provide/inject):
В Vue 3 был добавлен новый механизм под названием "provide" и "inject", который позволяет передавать данные из родительского компонента во всех его дочерних компонентах без необходимости явно указывать каждый пропс.
В родительском компоненте:
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import { provide } from 'vue';
export default {
setup() {
const parentData = 'Данные из родительского компонента';
provide('data', parentData);
}
}
</script>
В дочернем компоненте:
<template>
<div>
{{ data }} <!-- Вывод переданных данных из родительского компонента -->
</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const data = inject('data');
return {
data
};
}
}
</script>
В этом примере мы используем функциональный стиль компонента с помощью новой функции "setup()". Мы определяем значение "parentData" в родительском компоненте и передаем его с помощью "provide". Затем в дочернем компоненте мы использовали функцию "inject" для получения переданных данных.
Это только два способа передачи данных из родительского компонента в дочерний в Vue 3. Вам также доступны другие механизмы, такие как event bus, Vuex и т. д. в зависимости от ваших потребностей.