В Vue.js существует несколько способов хранить дополнительные данные компонентов. Рассмотрим наиболее популярные из них.
1. Пропсы (props):
Для передачи данных из родительского компонента в дочерний компонент используются пропсы. Пропсы являются свойствами компонента, которые определены в родительском компоненте и передаются в дочерний компонент при его использовании. Пропсы доступны только для чтения в дочернем компоненте и могут быть использованы для передачи любых данных, включая примитивные значения, объекты или даже функции.
Пример:
Родительский компонент:
<template>
<child-component :message="message"></child-component>
</template>
<script>
export default {
data() {
return {
message: 'Привет, Vue.js!'
}
}
}
</script>
Дочерний компонент:
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message']
}
</script>
В этом примере родительский компонент передает сообщение "Привет, Vue.js!" в дочерний компонент через пропс с именем "message", и дочерний компонент просто выводит его на страницу.
2. Данные компонента (data):
Внутри каждого компонента в Vue.js есть объект data, который содержит данные компонента. Эти данные доступны только в пределах компонента и его шаблона. Данные могут быть созданы как примитивные значения, так и объекты.
Пример:
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Привет, Vue.js!'
}
}
}
</script>
В этом примере компонент содержит единственное свойство data - message, которое содержит строку "Привет, Vue.js!". Значение этого свойства может быть использовано внутри шаблона компонента через двойные фигурные скобки.
3. Вычисляемые свойства (computed properties):
Вычисляемые свойства - это методы, которые вычисляют значения на основе зависимостей и кэшируют результаты, чтобы избежать ненужных вычислений на каждом обновлении. Вычисляемые свойства могут быть использованы в шаблоне компонента так же, как и обычные свойства данных.
Пример:
<template>
<div>{{ fullName }}</div>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
}
</script>
В этом примере компонент имеет два свойства данных: firstName и lastName. Вычисляемое свойство fullName использует эти данные для вычисления полного имени, которое будет отображаться на странице.
4. Методы компонента (methods):
Методы компонента - это обычные функции, которые могут быть вызваны из шаблона компонента или из других методов компонента. Методы могут быть использованы для выполнения дополнительных операций или для обработки событий.
Пример:
<template>
<div>
<button @click="sayHello">Нажми на меня!</button>
</div>
</template>
<script>
export default {
methods: {
sayHello() {
alert('Привет, Vue.js!')
}
}
}
</script>
В этом примере компонент содержит метод sayHello, который будет вызываться при клике на кнопку и показывать всплывающее окно с текстом "Привет, Vue.js!".
Все эти способы могут быть комбинированы и использованы вместе для удовлетворения конкретных требований вашей программы. Каждый из них имеет свои особенности и подходит для различных ситуаций.