从组件访问作用域插槽答案

【问题标题】：Access scoped slot from component从组件访问作用域插槽
【发布时间】：2021-06-21 10:55:28
【问题描述】：

我得到了这个组件：

<template>
  <Popover v-slot="{ open }">
    <PopoverButton>
      {{ title }}
    </PopoverButton>
    <div v-if="computedOpen">
      <PopoverPanel static>
        <slot name="popover"></slot>
      </PopoverPanel>
    </div>
  </Popover>
</template>

<script>
import {Popover, PopoverButton, PopoverPanel} from '@headlessui/vue'
import {computed, ref, watch} from 'vue'
import {useRoute} from 'vue-router'

export default {
  name: 'DropdownMenuButton',
  mixins: [slots],
  props: {
    name: {
      type: String,
    },
    title: {
      type: String,
      default: ''
    },
  },
  components: {
    Popover,
    PopoverButton,
    PopoverPanel,
    ChevronDownIcon,
  },
  setup(props) {
    const isOpen = ref(null);
    const route = useRoute()

    watch(route, () => {
      isOpen.value = false;
    });

    const computedOpen = computed(() => {
      let open = ...? //this is missing...
      return isOpen.value && open.value;
    });

    return {
      computedOpen
    }
  },
}
</script>

该组件使用headless UI's popover。

现在我想在路线更改后关闭弹出框。虽然检测到路由更改正常，但我无法访问setup() 方法中的<Popover> 的open 值以确定computedOpen 是否应该返回true 或false。

我的问题：如何在计算值中访问v-slot="{ open }？

【问题讨论】：

标签： javascript vue.js vuejs3

【解决方案1】：

你想要的都是不可能的。

想一想：

<Popover> 元素（插槽内容）中的所有内容都由 Vue 编译为返回内容的虚拟 DOM 表示的函数
此函数作为slots.default 传递给Popover 组件，当Popover 组件正在渲染时，它会调用该函数并将open 值作为参数传递

所以open 的值是Popover 组件的内部状态，只能在模板内部访问（即槽渲染函数）

所以我认为你最好的选择是抛弃computed 的想法，直接在模板中使用open 值，或者使用method，将open 作为参数传递

    <div v-if="isOpen && open">
      <PopoverPanel static>
        <slot name="popover"></slot>
      </PopoverPanel>
    </div>

    <div v-if="isPanelOpen(open)">
      <PopoverPanel static>
        <slot name="popover"></slot>
      </PopoverPanel>
    </div>

【讨论】：