我来给你梳理两种靠谱的实现方式，都是Vue生态里常用的解决方案，完美适配你这种父组件调用带插槽子组件的场景：

方案1：通过ref直接调用子组件的关闭方法 #

这是最直接的方式，给子组件绑定一个ref标识，父组件点击元素时，通过ref获取子组件实例并调用内部封装的关闭方法。

完整代码示例 #

Child子组件（补全你的代码片段）

const Child = {
  template: `
    <div class="m-dropdown">
      <button class="m-dropdown__button" aria-haspopup="true" :aria-expanded="isOpen" @click="toggleDropdown">
        打开下拉框
      </button>
      <div class="m-dropdown__content" v-if="isOpen">
        <!-- 你的两个插槽 -->
        <slot name="header"></slot>
        <slot name="body"></slot>
        <button @click="closeDropdown">内部关闭按钮</button>
      </div>
    </div>
  `,
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    // 封装关闭逻辑，供父组件调用
    closeDropdown() {
      this.isOpen = false;
      // 可选：触发自定义事件通知父组件状态变化
      this.$emit('dropdown-closed');
    }
  }
}

Parent父组件

const Parent = {
  template: `
    <div class="parent-wrapper">
      <!-- 父组件内的触发元素 -->
      <button @click="closeChildDropdown">点击这里关闭子组件</button>
      
      <!-- 使用子组件并绑定ref -->
      <Child ref="dropdownInstance">
        <template #header>
          <h4>插槽头部内容</h4>
        </template>
        <template #body>
          <p>插槽主体内容，由父组件传入</p>
        </template>
      </Child>
    </div>
  `,
  components: {
    Child
  },
  methods: {
    closeChildDropdown() {
      // 通过ref获取子组件实例，调用关闭方法
      this.$refs.dropdownInstance.closeDropdown();
    }
  }
}

// 挂载Vue实例
new Vue({
  el: '#app',
  components: {
    Parent
  }
})

方案2：通过状态同步（遵循单向数据流，更推荐） #

如果不想直接操作子组件实例，可以让父组件管理子组件的显示状态，通过v-model语法糖实现双向绑定，这样父组件修改状态就能触发子组件关闭，更符合Vue的设计理念。

完整代码示例 #

改造后的Child子组件

const Child = {
  // 接收父组件传入的状态
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  template: `
    <div class="m-dropdown">
      <button class="m-dropdown__button" aria-haspopup="true" :aria-expanded="value" @click="$emit('input', !value)">
        打开下拉框
      </button>
      <div class="m-dropdown__content" v-if="value">
        <slot name="header"></slot>
        <slot name="body"></slot>
        <button @click="$emit('input', false)">内部关闭按钮</button>
      </div>
    </div>
  `
}

Parent父组件

const Parent = {
  template: `
    <div class="parent-wrapper">
      <button @click="isDropdownOpen = false">点击这里关闭子组件</button>
      
      <!-- 用v-model绑定状态，实现双向同步 -->
      <Child v-model="isDropdownOpen">
        <template #header>
          <h4>插槽头部内容</h4>
        </template>
        <template #body>
          <p>插槽主体内容，由父组件传入</p>
        </template>
      </Child>
    </div>
  `,
  components: {
    Child
  },
  data() {
    return {
      isDropdownOpen: false
    }
  }
}

小提示 #

• 用ref方案时，要确保子组件已经挂载完成（比如不要在created钩子中调用，可在mounted或$nextTick里执行）。
• 推荐方案2，因为它符合Vue的单向数据流原则，状态统一由父组件管理，代码更易维护和调试。
• 如果子组件关闭时有复杂逻辑（比如动画过渡、资源清理），优先在子组件内部封装方法，再通过上述两种方式触发。

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