子组件中$emit和update更新传递变量

vue2.6之后才可以使用update更新，vue2.6以下版本使用input和v-model

需求描述：蒙层上展示弹窗，弹窗点击关闭，需要向父传递关闭的信息

方法1，简便直接传递变量visible（或者不改名isModalVisible也是可以的）修改，相应的父组件中使用sync修饰符
方法2，子组件中传递变量visible（或者不改名isModalVisible也是可以的），父组件中使用@update自定义事件把这个传递过去赋值
子组件中写法都一样，区别在于父组件有两种写法，sync修饰符是语法糖。当要处理更多逻辑推荐2，否则推荐方法1。

子组件中

<template>
  <div class="subscribe-modal" @click.stop>
    <!-- 右上角关闭角标 -->
    <div class="modal-close" @click="closeCom"/>我是关闭<div>
  </div>
</template>

<script>
export default {
    name: "Son",
    data() {
        return {
        }
    },
    methods: {
        closeCom() {
            console.log('点击了关闭')
            // 方法1，简便直接传递变量visible（或者不改名isModalVisible也是可以的）修改，相应的父组件中使用sync修饰符
            this.$emit('update:visible',false)
            // 方法2，子组件中传递变量visible（或者不改名isModalVisible也是可以的），父组件中使用@update自定义事件把这个传递过去赋值
            this.$emit('update:visible',false)
        }
    }

}
</script>

<style lang="less">

</style>

父组件中

<template>
	<!-- 蒙层 -->
    <div v-if="isModalVisible" class="show-modal" @click="closeModal">
      <!-- 某个弹窗 -->
      <!-- visible是子组件的一个 prop 名称，和子组件传递过来的对应就好，后面的isModalVisible是父组件的属性 -->
      <!-- <Son :visible.sync="isModalVisible"></Son> -->
      <!-- visible是子组件的一个 prop 名称，和子组件传递过来的对应就好，后面的handleVisibilityUpdate是自定义事件，事件内处理赋值 -->
       <Son @update:visible="handleVisibilityUpdate"></Son>
    </div>
  </template>
  
  <script>
  import SubscribeModal from './modal/SubscribeModal.vue';
  export default {
    name: "ShowModal",
    components: {
      SubscribeModal
    },
    data() {
      return {
        isModalVisible: true, // 控制弹窗显示状态
      };
    },
    methods: {
      closeModal() {
        // 关闭了打开的弹窗和蒙层
        this.isModalVisible = false;
      },
      handleVisibilityUpdate(newValue) {
        this.isModalVisible = newValue;  // 传递过来的visible
      }
      
    },
  };
  </script>
  
  <style lang="less" scoped>
  .show-modal{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.86);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal-content {
    z-index: 1001; /* 确保内容在蒙层之上 */
  }
  </style>