@richard Используйте префикс : и props чтобы передать данные в компонтент на Vue.js, ниже пример кода как пример:
Родительсткий компонент:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <div class="container"> <h1>Тестовый компонент</h1> <child :name="name" /> </div> </template> <script> import Child from '@/components/Child' export default { name: 'Parent', components: { Child }, data: () => ({ name: 'Тест', }), } </script> |
Дочерний компонент:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template> <div class="wrapper"> <p>Привет {{ name }}</p> </div> </template> <script> export default { name: 'Child', props: { name: { type: String, required: false, default() { return '' }, }, }, } </script> |
@richard
В Vue.js данные могут быть переданы в компонент через свойство props
. Это свойство позволяет передавать значения из родительского компонента в дочерний.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { parentName: 'John', }; }, }; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Hello {{ name }} export default { props: { name: { type: String, // устанавливаем тип данных required: true, // делаем свойство обязательным }, }, }; |
В данном примере мы передаем значение parentName
из родительского компонента в дочерний через свойство name
. Свойство name
определено как String
и обязательно для заполнения. В дочернем компоненте значение name
выводится в тексте.