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

【问题标题】：How to use v-model on a slot in vue 3?如何在 vue 3 的插槽上使用 v-model？
【发布时间】：2021-08-19 06:10:49
【问题描述】：

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

我可以将数据传递到插槽但不能使用 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>

我猜答案是不可能的，要找到另一种方法，但如果有人知道那将非常感谢

【问题讨论】：

标签： vue.js vuejs3 v-model slots

【解决方案1】：

如果您传递一个对象并将其属性与 v-model 一起使用，它可以工作，但我认为不建议这样做（至少在 Vue 2.x 中）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CDN en Vue 3</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  
  <body>
    <div id="app">
      <child>
        <template v-slot:default="props">
          <h3>Slot</h3>

          <p>
            Object.val: <input v-model="props.data.val"> : {{props.data.val}} (binding works)
          </p>
        </template>
      </child>
    </div>
  </body>
</html>

const child = {
  template: `
    <h3>Component</h3>

    <p>
      Object.val: <input v-model="data.val"> : {{data.val}} (binding works)
    </p>

    <hr>

    <slot :data="data" :val="val"></slot>
  `,
  data() {
    return {
      data: {val: 1},
      val: 'asd'
    }
  }
}

https://jsfiddle.net/rjurado/un3sdqte/30/

【讨论】：

【解决方案2】：

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>

【讨论】：