Question

具有父亲组件-

<b-nav-item @click="loginModalShow = !loginModalShow">Show</b-nav-item>
<LoginModal :loginShow="loginModalShow"/>

export default {
data () {
  return {
    loginModalShow: false,
  }
}

具有子组件-

<b-modal
  ref="LoginModal"
  v-model="showModal"
/>

export default {
props:['loginShow'],
data () {
  return {
    showModal: this.loginShow,
  }
 }
}

我的问题是，当我单击b-nav-item Show时，模态无法打开。

Answer 1

您正在做的是更新LoginModal上的属性，并希望数据也根据新的属性值进行更新。但是Vue JS不能那样工作。您可以通过添加观察者来解决此问题。

在您的LoginModal中添加以下内容：

watch: {
    loginShow: function () {
        this.showModal= this.loginShow
    }
}

编辑：

aBiscuit建议，最好在监视处理程序中添加新值，如下所示：

loginShow: function (newVal) {
    this.showModal= newVal
}

Answer 2

只需使用计算属性重写子组件即可：

<b-modal
  ref="LoginModal"
  v-model="showModal"
/>

export default {
  props:['loginShow'],
  computed: {
    showModal () {
      return this.loginShow
    }
  }
}

使用bootstrap-vue将prop从父亲传递到子模式组件

2 个答案: