使用 bootstrap-vue 将 prop 从父亲传递给子模态组件答案

【问题标题】：Passing prop from father to child modal component using bootstrap-vue使用 bootstrap-vue 将 prop 从父亲传递给子模态组件
【发布时间】：2019-04-03 15:03:33
【问题描述】：

有父组件 -

<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 时，模式没有打开。

【问题讨论】：

标签： vue.js vuejs2 bootstrap-vue

【解决方案1】：

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

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

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

【讨论】：

这样，我收到警告 - 计算属性“showModal”已分配给但它没有设置器。
啊……是的。这是因为你在 v-modal 中使用了 showModal。

【解决方案2】：

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

在你的 LoginModal 中添加：

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

编辑：

正如aBiscuit 所建议的，最好像这样在监视处理程序中添加新值：

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

【讨论】：

我建议使用 nextValue 监视处理程序的参数，而不是在处理程序内部引用自身。根据我的经验，有些情况下这种方法不能按预期工作。此外，它使处理程序行为更具可读性和逻辑性。
手表的使用是不是“太过分”了，它总是跑在后面听变化？在这种情况下，变化并不那么频繁
无论如何，通过这样做，第一次点击是可以的，但第二次点击不是。我的意思是第一次将 newVal 设置为 true，然后设置为 false。这样，每点击一次就会显示模态
通过 loginShow 处理：function () { this.showModal= !this.showModal } vue weise 可以吗？
@Maayans 我不会说使用手表“太多了”，据我了解，Vue 非常聪明，并且（我认为）一旦值发生更改，就会找到正确的观察者进行更新。所以watch 不会经常检查。至于显示每秒钟点击一次的模式，这是因为您的按钮中的代码。单击它会将loginShow 设置为!loginShow，从而在真假之间切换。至于你的最后一条评论，我不建议那样做。它可能有效，但您正在观看一个属性，但您没有使用该属性。我建议我的答案中显示的两种方式中的任何一种