Question

我从props获得价值。并依靠它改变阶级。这是工作代码：

<div class="modal" :class="{'is-active': aa}" >

但是当我尝试根据isActive中的data值进行检查时：

<div class="modal" :class="{'is-active': isActive}" >

什么都不起作用。模态窗口不出现。为什么？

https://jsfiddle.net/tagdjyrL/

如果将aa更改为isActive，则示例将停止工作

Answer 1

将isActive从您的data移至computed。

computed:
{
  isActive() { return this.aa }
}

并编辑您的closeModalWindow：

  closeModalWindow: function()
  {
    this.$emit('my-event', false)
  }

您现在不能直接编辑isActive，因此只需传递false作为有效载荷即可。

https://jsfiddle.net/tagdjyrL/11/

Answer 2

也许您错过了文档的这一部分：如果您在数据中使用prop，就像这样：

props: ['modalOpen'],
data () {
  return {
    isActive: this.modalOpen
  }
}

您的openModal值将仅用作isActive属性的初始值。因此，当您更改openModal时，isActive将保持不变。但是，当您在计算属性中使用openModal时，就像这样：

props: ['modalOpen'],
computed: {
  isActive () {
    return this.modalOpen
  }
}

isActive的值保持反应性，将反映openModal的变化。

因此，当您在子组件中使用此原理时，将不需要使用$ emit：

在父母中：

<template>
  <my-modal :openModal="isActive">
</template>

<script>
  export default {
    data () {
      return {
        isActive: false
      }
    }
  }
</script>

在模式中：

<template>
  <div v-if="isActive">
    ...
  </div>
</template>

<script>
  export default {
    props: ['modalOpen'],
    computed: {
      isActive () {
        return this.modalOpen
      }
    }
  }
</script>

现在，您可以通过将父组件中的isActive属性更改为true / false来显示/隐藏模态，无需使用$ emit方法。

无法使用模板中数据中的值。只有道具才有价值

2 个答案: