我的问题更多的是寻找解释。
我有两个组成部分,父亲和孩子。
父亲:
<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 警告]:避免直接改变 prop,因为每当父组件重新渲染时,值都会被覆盖。相反,根据道具的值使用数据或计算属性。道具正在变异:“数据”
在发现
是的,我知道在 JS 中对象是不同的并且是“神奇的”,但我预计 Vuejs 不允许这样做。
这是期望的/应有的(对于 JS 特定的)行为吗?
相关分类