在子组件中单击时在父组件中打开弹出窗口

Question

我想知道如果被单击的元素位于子组件中，如何打开一个弹出窗口。基本上，我是这样的：

//Child

<button @click="openPopup">Open</button>

export default {
  methods: {
    openPopup() {
      this.$emit('openPopup');
    }
  }
}

    //Parent
    <popup v-show="isShown"></popup>
   export default {
    data() {
      return {
       isShown:false
      }
    }

所以基本上我可以看到正在发出事件，但不知道如何应用它来更改 isShown 值

Answer 1

试试这个：

子组件：

<template>
    <div>
        <button @click="openPopup(true)">Open</button>
    </div>
</template>


<script>
// ...

export default {
  // ...
  methods: {
    openPopup(flag) {
      this.$emit("openPopupInParent", flag);
    }
  }
};
</script>

父组件：

<template>
    <div>
        <popup v-show="isShown" @openPopupInParent="showPopup"></popup>
    </div>
</template>

<script>
// ...

export default {
  // ...
  methods: {
    showPopup(flag) {
      this.isShown = flag
    }
  }
};
</script>