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

Question

我的 Web 应用程序中有两个组件，主要模式和更新模式。我希望进入主页时可以立即显示模态组件。因此，当安装 main.vue 时，showModal 设置为真。但是，当网页进入主页时，模式不会出现。我认为 showModal 变为 true 并传递给模态组件。当我使用 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

问题是数据在创建组件时初始化一次。当 props isShow 发生变化时，data 中的旧值仍然存在。您需要添加watcher来更新数据

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

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

Pass dynamic props to child component in Vue.js

javascript

vue.js

vue-props