Vue.js中通过插槽调用父组件方法实现Modal组件复用

完全可以触发你定义在首页的deleteItem和closeModal方法，你此前对插槽作用域的认知存在偏差。

• Vue默认插槽的编译作用域归属父组件：写在<Modal></Modal>标签包裹范围内的所有模板代码，可访问的变量、方法全部来自当前调用Modal的父组件（即你的首页实例），和Modal组件内部定义的属性、方法默认完全隔离。你当前写法里的@click="deleteItem"、@click="closeModal"本来就会直接匹配首页中定义的方法，只要方法在首页实例中正确声明，点击就能正常触发，不会主动去找Modal组件内部的同名方法。
• 你提到的“插槽内容调用Modal组件内部方法”是作用域插槽的专属能力：只有Modal组件主动通过插槽prop把内部的方法、数据向外传递时，插槽内容才能访问到Modal内部的逻辑，默认情况下不会出现跨作用域调用的问题。

针对你要实现的「仅传入标题即可跨场景复用Modal」的目标，可以把通用逻辑内置到Modal组件中，通过作用域插槽向外暴露必要能力，减少父组件的重复代码：

1. 先在Modal组件内部封装弹窗显示/隐藏的通用逻辑，把关闭方法通过插槽prop向外抛出：

<!-- Modal组件内部代码 -->
<template>
  <div class="modal-mask" v-if="visible">
    <div class="modal-container">
      <h4 class="modal-title">{{ title }}</h4>
      <div class="modal-action-area">
        <!-- 插槽向外暴露内部的关闭方法 -->
        <slot :close="handleClose"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(false)
defineProps({
  title: {
    type: String,
    required: true
  }
})
const handleClose = () => {
  visible.value = false
}
// 向父组件暴露打开弹窗的方法
defineExpose({
  open: () => visible.value = true
})
</script>

2. 首页使用时，不需要重复实现弹窗关闭的通用逻辑，只需要传入标题、绑定当前场景专属的操作逻辑即可：

<!-- 首页使用代码 -->
<template>
  <button @click="deleteModal.open()">删除条目</button>
  <Modal title="Are you sure to delete?" ref="deleteModal" v-slot="{ close }">
    <button @click="handleDelete(close)">Yes</button>
    <button @click="close">No</button>
  </Modal>
</template>

<script setup>
import { ref } from 'vue'
import Modal from './components/Modal.vue'
const deleteModal = ref(null)
const handleDelete = async (close) => {
  // 执行当前场景专属的删除逻辑
  // await api.deleteItem()
  close()
}
</script>

这种封装模式下，弹窗的打开、关闭、样式布局等通用逻辑全部收敛在Modal组件内部，不同业务场景使用时只需要传入对应标题、实现场景专属的操作逻辑即可，不需要重复编写弹窗控制代码，完全满足跨场景复用的需求。

内容的提问来源于stack exchange，提问作者Mishen Thakshana