Question

Vue.js 有一个example，展示了如何构建包装按钮的功能组件：

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

但是如何建立与select一起使用的相似组件，然后可以在其父级上使用v-model？

我想出了以下几点，但是当我像这样使用v-model时：

<MyComponent :Label="'Status'" :Data="Statuses" v-model="selectedStatus" />

selectedStatus的值变为：

[object Event]

<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>

Answer 1

要使v-model正常工作，组件必须接收一个value属性并发出一个input事件，该事件的数据为 string 值。但是<select>的本机input事件数据是一个InputEvent对象，转换为字符串（[object Event]），这会导致绑定了{{1} }。

要解决此问题，我们需要在v-model的{{1}}事件数据到达父级之前对其进行修改。这需要删除<select>，这将使有问题的本机input事件传播到父级。然后，我们使用<select v-on="listeners">用所选选项的字符串值转发input事件。

步骤：

添加一个listeners.input($event.target.selectedOptions[0].value)道具，并将input的{{1}}绑定到value道具
使用选定选项的值重新发射<select>的{{1}}事件。这应该替换:value。

您的证监会应如下所示：

value

demo

如何在Vue中将v模型与功能模板组件一起使用？

1 个答案: