如何在 vue 3 的插槽上使用 v-model？

Question

我正在尝试找到一种方法来使用我制作的模型组件，但能够从其中一个插槽关闭模型。

我可以将数据传递到插槽，但不能使用 v-model，并且不相信我可以更改插槽属性来关闭模型打开状态

https://v3.vuejs.org/guide/component-slots.html#scoped-slots

这是我正在使用的弹出窗口

<PopoverModal>
    <template #toggleButton>
      <button>A</button>
    </template>
    <template #modalContent="{ toggleModal }">
      <div style="color: #fff; height: 400px; width: 400px;">test2 {{toggleModal}}</div>
      <button @click="toggleModal = false">click me</button>
    </template>
  </PopoverModal>

在弹出窗口组件中，我试图发送状态变量

<slot name="modalContent" :toggleModal="showSelector"></slot>

我猜答案是不可能的，并找到另一种方法，但如果有人知道那就太好了，谢谢

Answer 1

您不能直接使用模板更改 PopoverModal 数据，但可以绑定一些 setter 方法。

一些示例代码：

HelloWorld.vue

<template>
  <div class="hello">
    <PopoverModal>
      <template #toggleButton>
        <button>A</button>
      </template>
      <template #modalContent="modelContent">
        <div style="color: #fff; height: 400px; width: 400px;">test2 {{modelContent.toggleModal}}</div>
        <button @click="modelContent.setToggleModal(false)">click me</button>
      </template>
    </PopoverModal>
  </div>
</template>

<script>
import PopoverModal from './PopoverModal'
export default {
  components: {PopoverModal},
  name: 'HelloWorld',
  data () {
    return {
    }
  }
}
</script>

PopoverModal.vue

<template>
  <div>
    <slot name="toggleButton"></slot>
    <slot name="modalContent" :toggleModal="showSelector" :setToggleModal="setShowSelector"></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showSelector: true
    }
  },
  methods: {
    setShowSelector(showSelector) {
      this.showSelector = showSelector;
    },
  }
}
</script>