vue2中 子向父传值 关闭弹窗 语法糖代码

在Vue 2中，子组件想要向父组件传递关闭弹窗的信息通常会通过事件系统或者props来实现。这里有一个简单的例子，使用`v-on`指令和自定义事件：

<!-- 父组件 -->
<template>
  <div>
    <button @click="showModal">打开弹窗</button>
    <child-component :close-modal="handleClose"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    showModal() {
      this.$refs.childModal.show();
    },
    handleClose(event) {
      event.stopPropagation(); // 阻止事件冒泡到父级
      this.$refs.childModal.hide(); // 调用子组件的hide方法关闭弹窗
    }
  }
}
</script>

<!-- 子组件 (child-component.vue) -->
<template>
  <div v-if="isActive" ref="childModal">
    <!-- 弹窗内容... -->
    <button @click="$emit('close-modal')">关闭弹窗</button>
  </div>
</template>

<script>
export default {
  props: {
    closeModal: { type: Function, required: true } // 接收父组件传递的关闭函数
  },
  data() {
    return {
      isActive: false,
    };
  },
  methods: {
    hide() {
      this.isActive = false;
      this.closeModal(); // 触发父组件的回调函数
    },
  }
};
</script>

在这个例子中，当用户点击子组件中的“关闭”按钮时，它会触发`close-modal`事件，并将这个事件向上冒泡到父组件。父组件接收到这个事件后，通过`handleClose`方法隐藏弹窗。