В Vue 3 существует несколько методов передачи реквизитов дочерним компонентам. Вот некоторые из часто используемых подходов:
- Прямая привязка. Вы можете передавать реквизиты, напрямую привязывая их к дочернему компоненту в родительском шаблоне. Например:
<template>
<child-component :propName="propValue"></child-component>
</template>
<script>
export default {
data() {
return {
propValue: 'Hello, child component!'
};
}
};
</script>
- Динамические реквизиты. Вы можете передать динамические реквизиты дочернему компоненту, используя вычисленные свойства или методы в родительском компоненте. Вот пример:
<template>
<child-component :propName="getPropValue"></child-component>
</template>
<script>
export default {
computed: {
getPropValue() {
// Compute the prop value dynamically
return 'Hello, child component!';
}
}
};
</script>
- Синтаксис объекта: вы можете передать несколько реквизитов как объект, используя директиву
v-bind. Вот пример:
<template>
<child-component v-bind="props"></child-component>
</template>
<script>
export default {
data() {
return {
props: {
propName1: 'Value 1',
propName2: 'Value 2'
}
};
}
};
</script>
- Отправка событий: вы можете передавать реквизиты дочерним компонентам, отправляя события из дочернего компонента и перехватывая их в родительском компоненте. Вот пример:
<template>
<child-component @eventName="handleEvent"></child-component>
</template>
<script>
export default {
methods: {
handleEvent(propValue) {
// Handle the emitted event and use the prop value
}
}
};
</script>
Это всего лишь несколько примеров того, как можно передавать реквизиты дочерним компонентам во Vue 3. Не забудьте настроить имена и значения реквизитов в соответствии с вашим конкретным вариантом использования.