Vue.js-如何防止重新渲染整个组件

Question

我想防止我的整个组件(模态(重新渲染。当用户登录时，我的web应用程序会显示一个包含一些消息的模式。一旦用户单击next，该模式中的内容就会发生变化。但是，模态将再次显示弹出动画。模态使用相同的模态，但更改内容。

这是Vue的绝对工作方式，然而，如果firstPage发生变化，模式弹出窗口将再次出现。。。我怎么能只重新呈现内容部分，而不是整个模态？

<template>
<div>
<b-modal v-model="modalShow">
<p v-if="firstPage">Hello</p>
<p v-else>{{content}}</p>
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
modalShow: false,
}
},
computed() {
content() {
return this.$store.state.content
},
firstPage() {
return this.$store.state.firstPage
}
}
}
</script>

Answer 1

重新渲染的问题不太可能与孩子们有关，你能详细介绍一下这个例子吗？正如你在例子中看到的，孩子们的内容在没有第二次打开模态的情况下发生了变化，这应该与"；modalShow"；，您是如何以及在哪里更改这些数据的。

window.onload = () => {
new Vue({
el: '#app',
data() {
return {
modalShow: false,
firstPage: true,
}
},
methods: {
toggle() {
this.modalShow = !this.modalShow;
setTimeout(() => this.firstPage = !this.firstPage, 300);
}
}
})
}

<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<div id="app">
<div>
<b-button @click="toggle">Launch demo modal</b-button>
<b-modal v-model="modalShow">
<p class="my-4" v-if="firstPage">1st Component</p>
<p class="my-4" v-else>2nd Component</p>
</b-modal>
</div>
</div>

Answer 2

看完你的问题后，我想你有一个login button。。您可以执行以下操作-在button中添加一个点击事件，如下所示：

<b-button @click="login = !login> LOGIN </b-button> //use this if you want to switch your modal each time on click
<b-button @click="login = false"> LOGIN </b-button> //use this if you only want to change it one time after click

在这里，如果点击按钮后第一个是true，那么您将切换布尔值，它将是false。

然后你必须在data return中这样定义你的属性：

data() {
return {
login: true,
}
}

然后你可以在你的模板中检查它，就像你以前做的那样：

<p v-if="login == true">Login is true</p>
<p v-if="login == false">Login is false</p>
<!-- OR -->
<p v-if="login == true">Login is true</p>
<p v-else>Login is false</p>

如果你不想在模板中有login = !login这样的代码，你也可以在点击事件中添加一个方法并在那里检查它！

如果这对你有帮助，请告诉我！