确定是否有任何数据在所有组件之间发生变化-Vuejs

Question

在我的单页应用程序中，屏幕由多个组件组成。我想知道当我们移动到下一个屏幕时，所有组件的屏幕中是否有任何数据被修改/更改。

例如，我有Vue类"；createProject.vue"：

<template>
<Comments></Comments>
<ProjectSelection></ProjectSelection>
<MessageArea></MessageArea>
</template>

class Comments.vue，

<template>
<v-textarea
id="input--comments"
name="Comments"
></v-textarea>
</template>

class项目选择.vue，

<template>
<div>
<v-text-field
id="input--email"
:label="Email"
></v-text-field>
</div>
</template>

类MessageArea.vue，

<template>
<v-textarea
id="input--message-area"
name="message"
></v-textarea>
</template>

当我转到下一个屏幕时，我想知道是否有任何数据被更改。

请帮助我识别所有组件的数据更改。

Answer 1

在根组件中：

<template>
<Comments @modified="dataUpdated = true"></Comments>
<ProjectSelection @modified="dataUpdated = true"></ProjectSelection>
<MessageArea @modified="dataUpdated = true"></MessageArea>
</template>
<script>
export default
{
data()
{
return {
dataModified: false,
nextRoute: null,
}
},
created()
{
window.addEventListener('beforeunload', this.pageLeave);
},
beforeDestroy()
{
window.removeEventListener('beforeunload', this.pageLeave);
},
beforeRouteLeave(to, from, next)
{
this.routeLeave(to, from, next);
},
methods:
{
routeLeave(to, from, next)
{
if(this.dataModified)
{
this.nextRoute = next;
// show dialog to the user that there is unsaved data - it might call this.ignoreUnsaved
}
},
ignoreUnsaved()
{
// hide the dialog
if (this.nextRoute) this.nextRoute();
},
pageLeave(e)
{
if(this.dataModified)
{
const confirmationMessage = 'There is unsaved data. Ignore it and continue?';
(e || window.event).returnValue = confirmationMsg;
return confirmationMessage;
}
},
}
}
</script>

在Comments.vue:中

<template>
<v-textarea v-model.trim="newComment" />
</template
<script>
export default
{
data()
{
return {
trackThisForChanges:
{
newComment: '',
},
}
},
watch:
{
trackThisForChanges:
{
deep: true,
handler()
{
this.$emit('modified');
}
}
}
}