带有 HTML <select> 和 v-model 的 Vue.js 自定义组件（符合 W3C）

Question

我是 Vue.js 的新手（使用 Nuxt.js），我想要实现的是拥有一个可以在任何地方重复使用并且符合 W3C 的 Select 组件。

在@Jasmonate 答案的帮助下，我设法创建了这个组件，它正在工作。但是value 属性在源代码中仍然可见，因此不符合 W3C。也许问题出在项目的其他地方？！

父组件

<custom-select
  :options="options"
  v-model="selectedOption"
></custom-select>
<span>Selected : {{ selectedOption }}</span>

<script>
  data() {
    return {
      selectedOption: "A",
      options: [
        { label: "One", value: "A" },
        { label: "Two", value: "B" },
        { label: "Three", value: "C" }
      ],
    };
  }
</script>

自定义选择.vue

<template>
  <select :value="value" @input="clicked">
    <option
      v-for="option in options"
      :key="option.label"
      :value="option.value"
    >
      {{ option.label }}
    </option>
  </select>
</template>

<script>
  export default {
    props: {
      value: {
        required: true
      },
      options: {
        type: Array,
        required: true
      }
    },
    methods: {
      clicked($event) {
        this.$emit("input", $event.target.value);
      }
    }
  };
</script>

我阅读了那些文档页面：

• Form Input Bindings
• Components Basics

还浏览了网络以找到自定义组件中的 v-model 示例，但它始终与输入标签有关。我发现的关于使用 v-model 进行自定义选择的唯一示例实际上并不是一个选择标签，例如 StackOverflow 上的 Vue Select 插件或 this thread。

Answer 1

v-model 是语法糖。默认情况下，该值是一个名为 value 的 prop，并且每当发出事件 input 时，它都会更改（双向绑定）。

此外，v-model 绑定在 select 元素上，而不是 option。

您的代码可以这样修改：

<template>
  <select :value="value" @input="clicked">
    <option
      v-for="option in options"
      :key="option.label"
      :value="option.value"
    >
      {{ option.label }}
    </option>
  </select>
</template>

<script>
  export default {
    props: {
      value: {
        required: true
      },
      options: {
        type: Array,
        required: true
      }
    },
    methods: {
      clicked($event) {
        this.$emit('input', $event.target.value);
      }
    }
  };
</script>

此处的文档：https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

您还可以更改v-model 使用的道具名称和事件名称，请参阅：https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model