Vue.js 如何在Vue中将v-model与功能模板组件一起使用？

Vue.js演示了如何构建包装按钮的功能组件：

<template functional>
  <button
    class="btn btn-primary"
    v-bind="data.attrs"
    v-on="listeners"
  >
    <slot/>
  </button>
</template>

selectedStatus的值变为：

[object Event]

为了正常工作，组件必须接收值prop并发出数据为字符串值的输入事件。但是的本机事件数据是一个InputEvent对象，转换为字符串[object event]，这会对绑定的v模型产生不正确的结果

要解决此问题，我们需要在到达父级之前修改的输入事件数据。这需要删除，这将允许有问题的本机输入事件传播到父级。然后，我们使用listeners.input$event.target.selectedOptions[0].value转发带有所选选项字符串值的输入事件

步骤：

添加一个值属性，并将的：值绑定到值属性 使用选定选项的值重新发出的输入事件。这将替换v-on=侦听器。 你的证监会应该是这样的：

<template functional>
  <select
    1️⃣:value="props.value"
    2️⃣@input="listeners.input && listeners.input($event.target.selectedOptions[0].value)"
  >
    <option value="">-</option>
    <option v-for="item in props.Data" :key="item" :value="item">{{item}}</option>
  </select>
</template>

---

构建非功能组件不是问题。我希望用一个功能性的来实现这一点。我知道这可以用JSX来完成。功能组件可以使用作为数据别名的侦听器发出。在上选时，不考虑。@MaYaN Ok。我已经修改了功能组件的答案。我知道侦听器，但没有意识到它可以替换模板中的$emit。现在才看到它。好极了@今晚19日，我在您的演示中删除了条件，它继续正常工作，有条件覆盖的边缘情况吗？@slanden是的，这涵盖了没有输入事件侦听器的情况，当用户决定不在组件上使用v-model时，可能会发生这种情况。请注意，v-model会自动添加一个输入事件侦听器。您可以通过以下方式进行测试：在组件的@input中删除listeners.input复选框，在App.vue中从组件的用法中删除v-model，在浏览器面板中更改所选选项，最后在浏览器控制台中观察错误。

<template functional>
    <select v-bind:value="data.attrs" v-on="listeners">
        <option>-</option>
        <option v-for="item in props.Data" :key="item" :value="item">{{item}}</option>
    </select>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class TaskSelector extends Vue {
  @Prop({ type: String, required: true })
  public Label!: string;

  @Prop({ type: Array, required: true })
  public Data!: string[];
}
</script>

<template functional>
  <select
    1️⃣:value="props.value"
    2️⃣@input="listeners.input && listeners.input($event.target.selectedOptions[0].value)"
  >
    <option value="">-</option>
    <option v-for="item in props.Data" :key="item" :value="item">{{item}}</option>
  </select>
</template>