VueJs Lost Prop Data After Restart Page

Question

朋友们好，

我将数据从父组件传递到子组件。但是我发送给子组件的数据有时会显示"(空文本)在控制台中。例如，当我用Ctrl+F5刷新页面时。如何在不丢失数据的情况下将数据传递给子组件?你能帮我吗?我的目标是将路由信息从父组件移动到子组件。

谢谢你的帮助。

子组件代码

<script>
export default {
props: ["currentRoute"],
methods: {
_checkRoutes() {
console.log("Child Component:: ", this.currentRoute);
}
},
mounted() {
this._checkRoutes();
}
}
</script>

父组件截图

父组件父组件集值

控制台日志

页面路由为"/">

Answer 1

如评论部分所述，您不会丢失数据。这只是你的数据(在你的例子中是prop)没有响应，这意味着在prop更新的时候，ChildComponent.vue已经被调用了。

如果你想要能够处理在一个道具中传递的数据，你可以为那个道具定义一个watch(docs)，或者简单地定义一个computed(docs)，它将依赖于那个特定的道具。

所以，在你的例子中，它应该是这样的:

export default {
props: ["currentRoute"],
methods: {
_checkRoutes() {
console.log("Child Component:: ", this.currentRoute);
}
},
watch:{
currentRoute: () {
this._checkRoutes()
}
}
}

computed示例:

export default {
props: ["currentRoute"],
computed:{
currentWindowRoute: () {
// Do some checks, call a method or whatever
// and return something (value, Boolean, whatever you need for the case)
return this.currentRoute;
}
}
}

请记住，computed方法通常需要返回值。