Question

根据文件，

<input v-model="something">与：

相同

<input
 v-bind:value="something"
 v-on:input="something = $event.target.value">

因此我尝试了以下操作：

<input v-model='sample'>
<input v-bind:value='sample' v-on:input="sample = $event.target.value" >

现在当我在自定义组件中尝试相同时，它会触发错误：

VM99：2未捕获TypeError：无法读取未定义
的属性“value”

jsFiddle here

我在这里错过了什么才能让它发挥作用？感谢。

Answer 1

您在input事件处理程序中发出input事件。

所以这里发生的问题是：

当您输入input

时，首先<input>

input: function(event) {
  self.$emit("input", event.target.value) // 2
}

您将向目标元素发出值输入。

第二次发射是由处理程序本身引起的，

input: function(event) {
  /* the value of event is no longer a DOM el
   instead it is a string value which doesn't have a target property 
   it throws an error on the console. */

  self.$emit("input", event.target.value)
}

未捕获的TypeError：无法读取未定义的属性“值”

这是工作fiddle。

修改

此外，在您的组件HTML中，您希望$event拥有target，其中value属性还应具有self.$emit("input", event.target.value)属性。

heroku-buildpack-magic

因此，您在这里发出一个值，它将不起作用。

Answer 2

我在文档中遇到了同样的问题：
https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

您可以直接通过$event而不是$event.target.value

获取值

这是带有工作代码的文档示例：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event)"
    >
  `
})

现在v-model应该可以与该组件完美配合：

<custom-input v-model="searchText"></custom-input>

如何在自定义组件中使用v-bind？

2 个答案: