如何将函数作为Props传入子组件，实现Modal组件Yes按钮动态绑定？

没问题，这个需求实现起来很直观，核心就是利用Vue的Prop传递函数类型的值，然后在子组件里绑定到按钮的点击事件上就行。我给你一步步拆解：

第一步：修改Modal子组件，声明并绑定函数Prop #

首先在你的Modal组件里，先通过props选项声明一个用来接收点击逻辑的Prop（比如叫onYesClick），然后把它绑定到Yes按钮的@click事件上。我帮你补全了模板里的按钮部分：

<template>
  <div :id="`${id}`" data-modal>
    <div data-modal-title>
      {{ title }}
    </div>
    <div data-modal-body>
      {{ body }}
    </div>
    <div data-modal-actions>
      <!-- 绑定点击事件到我们的处理方法 -->
      <button @click="handleYesButtonClick">Yes</button>
      <button>Cancel</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    id: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    body: {
      type: String,
      required: true
    },
    // 声明接收一个函数类型的Prop，确保父组件必须传入
    onYesClick: {
      type: Function,
      required: true
    }
  },
  methods: {
    handleYesButtonClick() {
      // 调用父组件传入的函数，也可以在这里加子组件内部的前置逻辑
      this.onYesClick()
    }
  }
}
</script>

这里用中间方法handleYesButtonClick而不是直接写@click="onYesClick"的原因是：如果以后你需要在子组件里加一些额外逻辑（比如点击Yes后自动关闭弹窗、做一些状态校验），直接在这个方法里加就行，不用改动父组件的代码，扩展性更好。当然如果不需要额外逻辑，直接写@click="onYesClick"也是完全可以的。

第二步：父组件调用Modal时传入自定义函数 #

在使用Modal的父组件里，你只需要把想要执行的函数通过:on-yes-click（Vue会自动处理驼峰和短横线的转换）传递给Modal组件就行：

<template>
  <div class="app-container">
    <button @click="isModalVisible = true">打开确认弹窗</button>
    
    <!-- 传入我们自定义的Yes按钮点击逻辑 -->
    <Modal 
      v-if="isModalVisible"
      id="confirm-operation-modal"
      title="确认执行操作"
      body="你确定要继续这个操作吗？"
      :on-yes-click="handleModalYesAction"
    />
  </div>
</template>

<script>
import Modal from './components/Modal.vue' // 注意路径要对应你的文件位置

export default {
  components: {
    Modal
  },
  data() {
    return {
      isModalVisible: false
    }
  },
  methods: {
    handleModalYesAction() {
      // 这里就是你点击Yes按钮后要执行的业务逻辑
      console.log("弹窗的Yes按钮被点击了，开始执行对应操作！")
      // 比如关闭弹窗
      this.isModalVisible = false
      // 其他业务逻辑：发送请求、修改状态等等
    }
  }
}
</script>

额外：需要传递参数怎么办？ #

如果子组件需要把一些内部数据（比如弹窗ID、表单内容）传给父组件的函数，只需要在调用的时候传参即可：

子组件里修改调用逻辑：

handleYesButtonClick() {
  // 传递弹窗的id作为参数给父组件
  this.onYesClick(this.id)
}

父组件里的方法接收参数：

handleModalYesAction(modalId) {
  console.log(`ID为${modalId}的弹窗Yes按钮被触发`)
  this.isModalVisible = false
}

这样就完美实现了复用Modal组件的同时，动态绑定Yes按钮的点击逻辑啦！

内容的提问来源于stack exchange，提问作者Arnold Zahrneinder