【study】父传子-vue3通过v-model实现弹窗显示隐藏

1、父组件

<template>
  <div>
    <button @click="showModal">显示弹窗</button>
    <!-- 绑定控制状态到子组件的 v-model -->
    <ChildComponent v-model:visible="isModalVisible" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    // 定义控制弹窗显示状态的 ref
    const isModalVisible = ref(false);
    
    // 显示弹窗
    const showModal = () => {
      isModalVisible.value = true;
    };
    
    return {
      isModalVisible,
      showModal,
    };
  },
};
</script>

2、子组件

<template>
  <div v-if="visible" class="modal">
    <div class="modal-content">
      <span @click="closeModal" class="close-button">&times;</span>
      <p>这是一个弹窗</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
  },
  emits: ['update:visible'], // 定义触发的事件
  methods: {
    closeModal() {
      this.$emit('update:visible', false); // 关闭弹窗并通知父组件
    },
  },
};
</script>

<style scoped>
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}
.close-button {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>

1. 父组件 (ParentComponent) 定义了一个 isModalVisible 状态，通过 v-model:visible 传递给子组件 ChildComponent。
2. 子组件 (ChildComponent) 接收 visible 属性，并在需要关闭弹窗时，通过 this.$emit('update:visible', false) 向父组件发送更新事件。
3. 父组件收到 update:visible 事件后，自动更新 isModalVisible 状态为 false，从而控制子组件的弹窗关闭。

通过这种方式，父组件可以通过改变 isModalVisible 的值来控制子组件中弹窗的显示与隐藏。在子组件中点击关闭按钮时，可以直接通过 emit 更新父组件中的状态，达到实时联动的效果。

注意事项

• Vue.js 的 v-model 在绑定自定义组件时，默认使用 modelValue 和 update:modelValue，你可以通过修饰符（如 v-model:visible）来定义自定义的模型属性和事件。
• 确保在子组件中通过 props 接收 v-model 绑定的值，并在对应的事件中使用 emit 通知父组件更新状态。