Мой вопрос, это скорее поиск объяснения.
У меня есть два компонента, отец и ребенок.
Отец
<template>
<Child :data="testData" />
{{testData}} //for print data in father
</template>
<script>
export default {
name: "Father",
data() {
return {
testData: {name: "hello"}
}
}
}
</script>
А потом мой ребенок
<template>
<input v-model="data.name" />
</template>
<script>
export default {
name: "Child",
props: ["data"]
}
}
</script>
Как сказано в документации в этом разделе:
https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
Я ожидал, что он вернет ошибку, но нет, это сработает, если я попытаюсь изменить ввод, компонент-отец покажет правильное новое значение без консольной ошибки.
Итак, я протестировал с простой строкой для данных вместо объекта в отце, как:
Отец :
<template>
<Child :data="testData" />
{{testData}} //for print data in father
</template>
<script>
export default {
name: "Father",
data() {
return {
testData: "hello"
}
}
}
</script>
Ребенок :
<template>
<input v-model="data" />
</template>
<script>
export default {
name: "Child",
props: ["data"]
}
}
</script>
И в этом случае я получу правильную ошибку:
[Vue warn]: избегайте мутации напрямую, так как значение будет
перезаписывается при повторной визуализации родительского компонента. Вместо этого используйте
данные или вычисленное свойство, основанное на значении реквизита. Опора существо
мутировал: "данные"
найдено в
Да, я знаю, что в JS объекты разные и "магические", но я ожидал, что Вуэйс не допустит этого.
Это желаемое / из-за (для JS-специфики) поведение?
Thankyou.