带有HTML 和v-model]的Vue.js自定义组件，

Question

[我是Vue.js的新手（使用Nuxt.js），我阅读了这些文档页面：

• Form Input Bindings
• Components Basics

并且还环顾了整个网络，以在自定义组件中找到v-model的示例，但这始终与输入标签有关。我知道v模型实际上是在使用属性值和输入，但是如果我正确理解了，那么我最终会在HTML select上得到一个属性值，这不符合W3C，是吗？ （类似于that tread）

[我发现的关于带有v-model的自定义选择的唯一示例实际上不是选择标签，例如Vue Select插件或StackOverflow上的this thread。

-编辑-

因此，我想要实现的是拥有一个Select组件，该组件可以在任何地方重复使用。这是我的位置（带有@Jasmonate答案中的附加代码）：

父组件

<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>
custom-select.vue

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

<script>
  export default {
    props: {
      value: {
        required: true
      },
      options: {
        type: Array,
        required: true
      }
    },
    methods: {
      clicked($event) {
        this.$emit("input", $event);
      }
    }
  };
</script>
那是我迷路的地方，如何更新v模型？ “选择”中的值正在更改，但selectedOption不变。我可能错过了一件大事：（

我是Vue.js的新手（使用Nuxt.js），我阅读了这些文档页面：表单输入绑定组件基础知识并且还环顾了整个网络，以在自定义组件中找到v模型的示例，但这是.. 。

Answer 1

v-model是语法糖。默认情况下，该值是一个名称为value的prop，并且每次发出事件input时它都会更改（双向绑定）。您的代码可以这样修改：