使用 bootstrap-vue 将道具从父亲传递给子模态组件

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

只需使用计算重写您的子组件属性:

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

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

Answer 2

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

在您的 LoginModal 中添加：

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

编辑：

根据 aBiscuit 的建议，最好像这样在 watch 处理程序中添加新值：

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

使用 bootstrap-vue 将道具从父亲传递给子模态组件

Passing prop from father to child modal component using bootstrap-vue

vue.js

vuejs2

bootstrap-vue