vuejs2 - Vue作用域插槽子不呈现插槽内容

Question

我想我偶然发现了一些非常奇怪的东西。我有一个Menu组件，它有两种管理下拉列表可见性的方法div：

1. 内部使用本地状态；
2. 用于v-model跟踪父组件。

我还有一个名为MenuItem. 这MenuItem（一个或多个）将被传递到Menu默认插槽中。MenuItem有一个自己的插槽，用于图标。

它Menu还有一个用于“激活器”的插槽，一个用于切换菜单可见性的元素。这可以是常规插槽，也可以是作用域插槽。

如果菜单的可见性是通过作用域插槽处理的：

<Menu>
  <template v-slot:activator="{ on }">
    <button v-on="on" type="button">Click me</button>
  </template>
</Menu>

然后，图标MenuItem将在菜单第一次可见时呈现，但随后对可见性的更改将不会呈现图标。图标槽是可选的，所以我使用 来检查它的存在this.$slots['icon-left']，并且在第一次渲染之后这是undefined.

但是，如果我使用 管理父组件的可见性，v-model则不存在此行为。

<Menu v-model="isMenuVisible">
  <template v-slot:activator>
    <button @click="isMenuVisible = !isMenuVisible" type="button">Click me</button>
  </template>
</Menu>

我v-if用于切换下拉菜单的可见性。如果我使用v-show. 如果我不检查this.$slots['icon-left'].

我有这个问题的完整演示。

基本上我很困惑为什么会这样，我什至不知道谷歌是什么。

标签： vuejs2vue-component