Поэтому я хочу передать реквизиты компоненту Vue, но я ожидаю, что эти реквизиты будут меняться в будущем изнутри этого компонента, например, когда я обновляю этот компонент Vue изнутри с помощью AJAX. Таким образом, они предназначены только для инициализации компонента.
Мой cars-list
компонент Vue компонент, где я передаю реквизит с первоначальными свойствами для single-car
:
// cars-list.vue
<script>
export default {
data: function() {
return {
cars: [
{
color: 'red',
maxSpeed: 200,
},
{
color: 'blue',
maxSpeed: 195,
},
]
}
},
}
</script>
<template>
<div>
<template v-for="car in cars">
<single-car :initial-properties="car"></single-car>
</template>
</div>
</template>
То, как я делаю это прямо сейчас, что внутри моего компонента с single-car
я присваиваю this.initialProperties
свой this.data.properties
на created()
инициализационном крючке. И он работает и реагирует.
// single-car.vue
<script>
export default {
data: function() {
return {
properties: {},
}
},
created: function(){
this.data.properties = this.initialProperties;
},
}
</script>
<template>
<div>Car is in {{properties.color}} and has a max speed of {{properties.maxSpeed}}</div>
</template>
Но моя проблема заключается в том, что я не знаю, правильно ли это сделать? Разве это не вызовет у меня каких-то проблем по дороге? Или есть лучший способ сделать это?