Question

我一直在尝试学习Vue的v模型如何与自定义输入以及常规输入组件一起工作。

我看过一些示例，其中v-model与组件中以及模板中的值相关联，并且这两个值将有所不同。我觉得这很令人困惑，我认为这可能是对“双向绑定”的误解。您如何将输入绑定到两个值。

示例：

//模板中的v模型

const myCustomInput = ('my-custom-input', {
  data() {
    return {
      myObj: 'hello'
    }
  },
  template: `<input v-model="myObj" >`
});

//组件中的v模型

<my-custom-input v-model="someOtherObj.str">

我已经看到了这样的两个v模型的示例，它们在模板级别和组件上都定义了不同的值。

但是，当看这个SO post时，@ asemahle的回答似乎更加合乎逻辑。此外，官方的Vue文档甚至在模板和组件上都没有2个单独的v模型。 Vue JS component basics

在后面的示例中，似乎更具逻辑性，因为仅定义了一个v模型并将其绑定到输入组件，而不是两个。

第一个示例不正确吗？如果不是，那么有人可以更清楚地解释它是如何工作的。对于一次输入有两个单独的v-models，我似乎找不到任何真正好的文档。

Answer 1

双向绑定是指将模板html仅绑定到一个对象。在您的示例中，您尝试将其绑定到您声明的两个单独的值，这只是对术语双向绑定的误解。

在双向绑定中，您仍然只会将一个v模型绑定到一个数据元素。 “双向”部分指的是以下事实：当您在文本框中键入v模型后，将v模型绑定到数据属性时，数据属性也会更改。如果您更改了数据属性，也可以通过方法或调用API，然后文本框也将反映该数据更改，从而实现双向数据绑定。

Answer 2

在您提供的示例代码中，您有一个组件，该组件的模板在本机输入上包含v-model：

template: `<input v-model="myObj" >`

这意味着input（双向）绑定到myObj：对myObj值的更改将反映在输入中，而对输入的更改将更新数据项。

然后您将在该组件的实例上带有v-model。该组件将收到一个value属性，并有望发生emit input个事件以实现双向绑定。 v-model on components is described here。

您没有“输入绑定到两个值”，但是您可能没有意义的绑定，因为绑定的两个东西（显然）是不相关的。您可能想要的是使您的组件充当该值的传递对象，以便您几乎可以将其视为本机input。 This example做到了。

custom input in the docs在组件上放置v-model，并对来自本地value元素的emit input和input使用显式绑定。您可以将它们用v-model替换为可计算的可设置表，就像我在上面段落中链接的示例中所做的那样。 get返回value，而set执行emit。

Answer 3

尝试在子组件中使用watch
父母：

<OptionCarouselCards                                                   
  :selected-values="bevarageSelected"
  @optionSelected="getBeverage"
/>

孩子：

<v-slide-group
  v-model="selected"
  @change="onSelect"
>


export default {
  props: {
    selectedValues: {
      type: [Array, Number],
      required: false,
      default: -1
    } 
 },
 data () {
   return {
     selected: this.selectedValues
   }
 },
 watch: {
   selectedValues (selectedValues) {
     this.selected = selectedValues
 }
},
methods: {
  onSelect (event) {
    this.$emit('optionSelected', this.selected)
  }
 }
}

Answer 4

对于多个双向绑定组件参数，您可以尝试这样的操作（vue 3）：

<ChildComponent v-model:arg2="parentVariable1"  v-model:arg1="parentVariable2" />

在更改值后的子组件中，您只需调用：

this.$emit("update:arg1","some_value") 
or 
this.$emit("update:arg2","some_value_2")

可以在vue docs

中找到更多详细信息

了解Vue JS v模型的两种方式绑定

4 个答案: