將動態道具傳遞給 Vue.js 中的子組件

Question

我的 Web 應用程序中有兩個組件，主要和更新模式。 我希望模態組件可以在進入主頁時立即顯示。 所以，當 main.vue 被掛載時， showModal被設置為 true。 但是，當網頁進入主頁面時，模態不會出現。 我認為showModal變為 true 並傳遞給模態組件。 當我使用 vue devtool 時，它顯示popModal為 false。 這真的讓我很困惑。

我應該更改設置真實值或任何建議的生命周期嗎？

謝謝！

主程序

<template>
  <modal :isShow="showModal"></modal>
  ...
</template>

<script>
export default {
 data () {
   return {
    showModal: false
  }
 }

 mounted() {
  //do something
  this.showModal = true
 }
}
<script>

Modal.vue

<template>
  <modal v-if="popModal" v-model="popModal">
   <p>xxxxxx</p>
   <button @click="fn()">Click</button>
  </modal>
</template>

<script>
export default {
 props: ['isShow'],
 data () {
  return {
   popModal: this.isShow//supposed to be true
  }
 }
 methods: {
  fn() {
    this.popModal = false
  }
 }
}
<script>

Answer 1

問題是數據在創建組件時被初始化一次。 當道具 isShow 更改時，數據中的舊值仍然存在。 您需要添加觀察者來更新數據

watch: {
  isShow(newVal, oldVal) {
    // newVal contains the updated value
    // oldVal contains the previous value
    this.popModal = newVal;
  }
}

或者您可以在值更改后初始化數據：

// Main.vue
<modal v-if="showModal" :isShow="showModal"></modal>

// Modal.vue
<modal v-model="popModal">