❌

阅读视图

发现新文章，点击刷新页面。

从零构建 Vue 弹窗组件

✇掘金 前端
yyt_

整体学习路线：简易弹窗 → 完善基础功能 → 组件内部状态管理 → 父→子传值 → 子→父传值 → 跨组件传值（最终目标）

步骤 1：搭建最基础的弹窗（静态结构，无交互）

目标：实现一个固定显示在页面中的弹窗，包含标题、内容、关闭按钮，掌握 Vue 组件的基本结构。

组件文件：BasicPopup.vue 

<template>
  <!-- 弹窗外层容器（遮罩层） -->
  <div class="popup-mask">
    <!-- 弹窗主体 -->
    <div class="popup-content">
      <h3>简易弹窗</h3>
      <p>这是最基础的弹窗内容</p>
      <button>关闭</button>
    </div>
  </div>
</template>

<script setup>
// 现阶段无逻辑，仅搭建结构
</script>

<style scoped>
/* 遮罩层：占满整个屏幕，半透明背景 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 弹窗主体：白色背景，固定宽高，圆角 */
.popup-content {
  width: 400px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  text-align: center;
}

/* 按钮样式 */
button {
  margin-top: 20px;
  padding: 8px 16px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

使用组件（App.vue）

<template>
  <h1>弹窗学习演示</h1>
  <BasicPopup />
</template>

<script setup>
import BasicPopup from './components/BasicPopup.vue';
</script>

步骤 2：添加基础交互（控制弹窗显示/隐藏）

目标：通过「响应式状态」控制弹窗的显示与隐藏，给关闭按钮添加点击事件，掌握 ref 和事件绑定。

改造 BasicPopup.vue（新增响应式状态和点击事件）

<template>
  <!-- 用 v-if 控制弹窗是否显示 -->
  <div class="popup-mask" v-if="isShow">
    <div class="popup-content">
      <h3>简易弹窗</h3>
      <p>这是最基础的弹窗内容</p>
      <!-- 绑定关闭按钮点击事件 -->
      <button @click="closePopup">关闭</button>
    </div>
  </div>
</template>

<script setup>
// 1. 导入 ref 用于创建响应式状态
import { ref } from 'vue';

// 2. 定义响应式变量，控制弹窗显示/隐藏
const isShow = ref(true); // 初始值为 true，默认显示弹窗

// 3. 定义关闭弹窗的方法
const closePopup = () => {
  isShow.value = false; // 响应式变量修改需要通过 .value
};
</script>

<style scoped>
/* 样式同步骤 1，不变 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  width: 400px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  text-align: center;
}

button {
  margin-top: 20px;
  padding: 8px 16px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

补充：在 App.vue 添加「打开弹窗」按钮

我们知道，Vue 遵循「单向数据流」和「组件封装隔离」，子组件内部的方法 / 私有状态默认是对外隐藏的，外部父组件无法直接访问。

而 ref 就是打破这种 “隔离” 的合法方式（非侵入式），让父组件能够：

  1. 调用子组件通过 defineExpose 暴露的方法（如 openPopup 方法，用于打开弹窗）。
  2. 访问子组件通过 defineExpose 暴露的响应式状态（如弹窗内部的 isShow 状态）。
  3. 实现「父组件主动控制子组件」的交互场景（如主动打开 / 关闭弹窗、主动刷新子组件数据）。
<template>
  <h1>弹窗学习演示</h1>
  <!-- 新增打开弹窗按钮 -->
  <button @click="handleOpenPopup">打开弹窗</button>
  <BasicPopup ref="popupRef" />
</template>

<script setup>
import { ref } from 'vue';
import BasicPopup from './components/BasicPopup.vue';

// 获取弹窗组件实例
const popupRef = ref(null);

// 打开弹窗的方法（调用子组件的方法，后续步骤会完善）
const handleOpenPopup = () => {
  if (popupRef.value) {
    popupRef.value.openPopup();
  }
};
</script>

<style>
button {
  margin: 10px;
  padding: 8px 16px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

给 BasicPopup.vue 补充「打开弹窗」方法（暴露给父组件）

<template>
  <div class="popup-mask" v-if="isShow">
    <div class="popup-content">
      <h3>简易弹窗</h3>
      <p>这是最基础的弹窗内容</p>
      <button @click="closePopup">关闭</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isShow = ref(false); // 初始值改为 false，默认隐藏

const closePopup = () => {
  isShow.value = false;
};

// 新增：打开弹窗的方法
const openPopup = () => {
  isShow.value = true;
};

// 暴露组件方法，让父组件可以调用（关键）
defineExpose({
  openPopup
});
</script>

<style scoped>
/* 样式同前 */
</style>

核心知识点

  1. ref 创建响应式状态，修改时需要 .value
  2. @click 事件绑定，触发自定义方法
  3. defineExpose 暴露组件内部方法/状态，供父组件调用
  4. v-if 控制元素的渲染与销毁（实现弹窗显示/隐藏）

步骤 3：父组件 → 子组件传值（Props 传递）

目标：父组件向弹窗组件传递「弹窗标题」和「弹窗内容」，掌握 defineProps 的使用，实现弹窗内容的动态化。

改造 BasicPopup.vue（接收父组件传递的参数）

<template>
  <div class="popup-mask" v-if="isShow">
    <div class="popup-content">
      <!-- 渲染父组件传递的标题 -->
      <h3>{{ popupTitle }}</h3>
      <!-- 渲染父组件传递的内容 -->
      <p>{{ popupContent }}</p>
      <button @click="closePopup">关闭</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 1. 定义 Props，接收父组件传递的值（指定类型和默认值）
const props = defineProps({
  // 弹窗标题
  popupTitle: {
    type: String,
    default: '默认弹窗标题' // 默认值，防止父组件未传递
  },
  // 弹窗内容
  popupContent: {
    type: String,
    default: '默认弹窗内容'
  }
});

const isShow = ref(false);

const closePopup = () => {
  isShow.value = false;
};

const openPopup = () => {
  isShow.value = true;
};

defineExpose({
  openPopup
});
</script>

<style scoped>
/* 样式同前 */
</style>

改造 App.vue（向子组件传递 Props 数据）

<template>
  <h1>弹窗学习演示</h1>
  <button @click="openPopup">打开弹窗</button>
  <!-- 向子组件传递 props 数据（静态传递 + 动态传递均可） -->
  <BasicPopup
    ref="popupRef"
    popupTitle="父组件传递的标题"
    :popupContent="dynamicContent"
  />
</template>

<script setup>
import { ref } from 'vue';
import BasicPopup from './components/BasicPopup.vue';

const popupRef = ref(null);
// 动态定义弹窗内容（也可以是静态字符串）
const dynamicContent = ref('这是父组件通过 Props 传递的动态弹窗内容～');

const openPopup = () => {
  if (popupRef.value) {
    popupRef.value.openPopup();
  }
};
</script>

<style>
button {
  margin: 10px;
  padding: 8px 16px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

核心知识点

  1. defineProps 定义组件接收的参数，支持类型校验和默认值
  2. Props 传递规则：父组件通过「属性绑定」向子组件传值，子组件只读（不能修改 Props，遵循单向数据流）
  3. 静态传值（直接写字符串）直接把等号后面的内容作为纯字符串传递给子组件的 Props，Vue 不会对其做任何解析、计算，原样传递。动态传值（:xxx="变量"） Vue 会先解析求值，再把结果传递给子组件的 Props。

步骤 4：子组件 → 父组件传值（Emits 事件派发）

目标：弹窗关闭时，向父组件传递「弹窗关闭的状态」和「自定义数据」，掌握 defineEmits 的使用，实现子向父的通信。

改造 BasicPopup.vue（派发事件给父组件）

<template>
  <div class="popup-mask" v-if="isShow">
    <div class="popup-content">
      <h3>{{ popupTitle }}</h3>
      <p>{{ popupContent }}</p>
      <!-- 关闭按钮点击时，触发事件派发 -->
      <button @click="handleClose">关闭</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 1. 定义 Props
const props = defineProps({
  popupTitle: {
    type: String,
    default: '默认弹窗标题'
  },
  popupContent: {
    type: String,
    default: '默认弹窗内容'
  }
});

// 2. 定义 Emits，声明要派发的事件（支持数组/对象格式，对象格式可校验）
const emit = defineEmits([
  'popup-close', // 弹窗关闭事件
  'send-data'    // 向父组件传递数据的事件
]);

const isShow = ref(false);

// 3. 改造关闭方法，派发事件给父组件
const handleClose = () => {
  isShow.value = false;
  
  // 派发「popup-close」事件，可携带参数（可选）
  emit('popup-close', {
    closeTime: new Date().toLocaleString(),
    message: '弹窗已正常关闭'
  });
  
  // 派发「send-data」事件，传递自定义数据
  emit('send-data', '这是子组件向父组件传递的额外数据');
};

const openPopup = () => {
  isShow.value = true;
};

defineExpose({
  openPopup
});
</script>

<style scoped>
/* 样式同前 */
</style>

改造 App.vue（监听子组件派发的事件）

<template>
  <h1>弹窗学习演示</h1>
  <button @click="openPopup">打开弹窗</button>
  <!-- 监听子组件派发的事件，绑定处理方法 -->
  <BasicPopup
    ref="popupRef"
    popupTitle="父组件传递的标题"
    :popupContent="dynamicContent"
    @popup-close="handlePopupClose"
    @send-data="handleReceiveData"
  />
</template>

<script setup>
import { ref } from 'vue';
import BasicPopup from './components/BasicPopup.vue';

const popupRef = ref(null);
const dynamicContent = ref('这是父组件通过 Props 传递的动态弹窗内容～');

const openPopup = () => {
  if (popupRef.value) {
    popupRef.value.openPopup();
  }
};

// 1. 处理子组件派发的「popup-close」事件
const handlePopupClose = (closeInfo) => {
  console.log('接收弹窗关闭信息：', closeInfo);
  alert(`弹窗已关闭，关闭时间：${closeInfo.closeTime}`);
};

// 2. 处理子组件派发的「send-data」事件
const handleReceiveData = (data) => {
  console.log('接收子组件传递的数据：', data);
  alert(`收到子组件数据：${data}`);
};
</script>

<style>
button {
  margin: 10px;
  padding: 8px 16px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

核心知识点

  1. defineEmits 声明组件要派发的事件，遵循「事件名小写+短横线分隔」规范
  2. emit 方法用于派发事件，第一个参数是事件名，后续参数是要传递的数据
  3. 父组件通过 @事件名 监听子组件事件，处理方法的参数就是子组件传递的数据
  4. 单向数据流补充：子组件不能直接修改 Props，如需修改，可通过「子组件派发事件 → 父组件修改数据 → Props 重新传递」实现

步骤 5：跨组件传值（非父子组件，使用 Provide / Inject）

目标：实现「非父子组件」（如：Grandpa.vue → Parent.vue → Popup.vue，爷爷组件向弹窗组件传值）的通信，掌握 provide / inject 的使用，这是 Vue 中跨组件传值的核心方案之一。

步骤 5.1：创建层级组件结构

├── App.vue（入口）
├── components/
│   ├── Grandpa.vue（爷爷组件，提供数据）
│   ├── Parent.vue（父组件，中间层级，无数据处理）
│   └── Popup.vue（弹窗组件，注入并使用数据）

步骤 5.2：爷爷组件 Grandpa.vue（提供数据，provide）

<template>
  <div class="grandpa">
    <h2>爷爷组件</h2>
    <button @click="updateGlobalData">修改跨组件传递的数据</button>
    <!-- 引入父组件（中间层级） -->
    <Parent />
  </div>
</template>

<script setup>
import { ref, provide } from 'vue';
import Parent from './Parent.vue';

// 1. 定义要跨组件传递的响应式数据
const globalPopupConfig = ref({
  author: 'yyt',
  version: '1.0.0',
  theme: 'light',
  maxWidth: '500px'
});

// 2. 提供（provide）数据，供后代组件注入使用
// 第一个参数：注入标识（字符串/Symbol），第二个参数：要传递的数据
provide('popupGlobalConfig', globalPopupConfig);

// 3. 修改响应式数据（后代组件会同步更新）
const updateGlobalData = () => {
  globalPopupConfig.value = {
    ...globalPopupConfig.value,
    version: '2.0.0',
    theme: 'dark',
    updateTime: new Date().toLocaleString()
  };
};
</script>

<style scoped>
.grandpa {
  padding: 20px;
  border: 2px solid #666;
  border-radius: 8px;
  margin: 10px;
}

button {
  padding: 8px 16px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

步骤 5.3：父组件 Parent.vue（中间层级，仅做组件嵌套）

<template>
  <div class="parent">
    <h3>父组件（中间层级）</h3>
    <button @click="openPopup">打开跨组件传值的弹窗</button>
    <!-- 引入弹窗组件 -->
    <Popup ref="popupRef" />
  </div>
</template>

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

const popupRef = ref(null);

// 打开弹窗
const openPopup = () => {
  if (popupRef.value) {
    popupRef.value.openPopup();
  }
};
</script>

<style scoped>
.parent {
  padding: 20px;
  border: 2px solid #999;
  border-radius: 8px;
  margin: 10px;
  margin-top: 20px;
}

button {
  padding: 8px 16px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

步骤 5.4：弹窗组件 Popup.vue（注入数据，inject）

<template>
  <div class="popup-mask" v-if="isShow" :style="{ backgroundColor: themeBg }">
    <div class="popup-content" :style="{ maxWidth: globalConfig.maxWidth, background: globalConfig.theme === 'dark' ? '#333' : '#fff', color: globalConfig.theme === 'dark' ? '#fff' : '#333' }">
      <h3>{{ popupTitle }}</h3>
      <p>{{ popupContent }}</p>
      <!-- 渲染跨组件传递的数据 -->
      <div class="global-info" style="margin: 15px 0; padding: 10px; border: 1px solid #eee; border-radius: 4px;">
        <p>跨组件传递的配置：</p>
        <p>作者：{{ globalConfig.author }}</p>
        <p>版本：{{ globalConfig.version }}</p>
        <p>主题：{{ globalConfig.theme }}</p>
        <p v-if="globalConfig.updateTime">更新时间：{{ globalConfig.updateTime }}</p>
      </div>
      <button @click="handleClose">关闭</button>
    </div>
  </div>
</template>

<script setup>
import { ref, inject, computed } from 'vue';

// 1. 定义 Props
const props = defineProps({
  popupTitle: {
    type: String,
    default: '默认弹窗标题'
  },
  popupContent: {
    type: String,
    default: '默认弹窗内容'
  }
});

// 2. 注入（inject）爷爷组件提供的数据
// 第一个参数：注入标识（与 provide 一致），第二个参数：默认值（可选）
const globalConfig = inject('popupGlobalConfig', ref({ author: '默认作者', version: '0.0.1' }));

// 3. 基于注入的数据创建计算属性（可选，优化使用体验）
const themeBg = computed(() => {
  return globalConfig.value.theme === 'dark' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(0, 0, 0, 0.5)';
});

// 4. 定义 Emits
const emit = defineEmits(['popup-close']);

const isShow = ref(false);

// 5. 关闭方法
const handleClose = () => {
  isShow.value = false;
  emit('popup-close', { message: '弹窗已关闭' });
};

// 6. 打开弹窗方法
const openPopup = () => {
  isShow.value = true;
};

// 7. 暴露方法
defineExpose({
  openPopup
});
</script>

<style scoped>
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

button {
  margin-top: 20px;
  padding: 8px 16px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

步骤 5.5：入口 App.vue（引入爷爷组件）

<template>
  <h1>跨组件传值演示（Provide / Inject）</h1>
  <Grandpa />
</template>

<script setup>
import Grandpa from './components/Grandpa.vue';
</script>

核心知识点

  1. provide / inject 用于跨层级组件通信（无论层级多深），爷爷组件提供数据，后代组件注入使用
  2. 传递响应式数据：provide 时传递 ref/reactive 包装的数据，后代组件可感知数据变化（同步更新）
  3. 注入标识：建议使用 Symbol 避免命名冲突（生产环境推荐），本步骤为简化使用字符串标识
  4. 注入默认值：inject 第二个参数为默认值，防止祖先组件未提供数据时出现报错
  5. 与 Props/Emits 的区别：Props 适用于父子组件，provide/inject 适用于跨层级组件
❌