自定义 Vue 组件的 v-model 与 props

Question

Vue 中的 v-model 是一个内置功能，仅适用于少数选定标签吗？props 功能是否可以替代 v-model？

Answer 1

Vue 中的 v-model 是一个内置功能，仅适用于少数选定标签吗？

v-model是一个默认作用于表单元素的指令，但你也可以在你自己的组件中使用它。它实际上只是接受名为“value”的属性并发出名为“input”的事件的组件的简写。

这是使用 v-model 的任意组件的样板：

<template>
  <div>
    My value is {{displayValue}}
    <button @click="go">Change it</button>
  </div>
</template>
<script>
export default {
  name: 'exampleComponent',
  props: ['value'],
  data() {
    return {displayValue: ''}
  },
  mounted() {
    this.displayValue = this.value; // initialize internal variables
  },
  watch: {
    value() {
      // Parent property changed; update internal variables
      this.displayValue = this.value;
    }
  },
  methods: {
    go() {
      // example change handler
      this.$emit('input', "NEW VALUE"); // tell the parent to update to the new value. This will update via the watch:value()
    }
  }
};
</script>

然后父组件可以<example-component v-model="someVariable"></example-component>像任何其他表单元素一样执行。

props 功能是 v-model 的替代品吗？

只为它的一半。Props 是一种将值向下传递给子组件的方法，但它们本身并没有让您将该值的更改传达回父组件；为此，您需要$emit更改值。

（v-model当然，您也可以完美地做到这一点，而无需使用自己命名的道具和发射，但我发现如果我坚持v-model结构，我就不必考虑那么多；当我六个月后回来时改变一些东西，更容易理解我在做什么。）