Vue.js - 如何防止重新渲染整個組件？

Question

我想阻止我的整個組件（模態）重新渲染。 當用戶登錄時，我的 Web 應用程序顯示一個包含一些消息的模式。 一旦用戶單擊下一步，此模式中的內容就會發生變化。 但是，模態將再次顯示彈出動畫。 模態使用相同的模態，但改變了內容。

這絕對是 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

閱讀您的問題后，我想您有一個login button ..比您可以執行以下操作-向您的button添加一個單擊事件，如下所示：

<b-button @click="login = !login> LOGIN </b-button>

在這里，您正在切換布爾值，如果單擊按鈕后它首先為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>

如果您不想在模板中使用諸如login = !login類的代碼，您還可以向單擊事件添加一個方法並在那里檢查它！

如果這對您有幫助，請告訴我！

Answer 2

重新渲染的問題不太可能與孩子有關，您能否詳細說明一下示例？ 正如您在示例中看到的那樣，子項的內容更改而無需第二次打開模態，這應該與“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>