将动态道具传递给 Vue.js 中的子组件

Question

在我的 Web 应用程序中有两个组件，主要和更新模式。我希望模态组件可以在进入主页时立即显示。因此，当 main.vue 挂载时，showModal 设置为 true。但是，当网页进入主页面时，模态框不会出现。我认为showModal 变为真并传递给模态组件。当我使用 vue devtool 时，它显示popModal 为假。这真的让我很困惑。

我应该更改设置真实值或任何建议的生命周期吗？

谢谢！

Main.vue

<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">