【Vue】在组件中使用 v-model

参考网址:
https://vue.docschina.org/v2/guide/components.html

在组件中使用 v-model

自定义事件(custom event),还可以用来创建出「实现 v-model 机制的自定义输入框(custom input)」。回顾前面章节中:

<input v-model="searchText">

等同于如下:

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

而用于一个组件时,v-model 则可以替换为如下:

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

为了组件内部能够有效运行,组件内的 必须:

将 value 属性绑定到 value prop
在 input 输入框中,在自定义的 input 事件中,发送一个新的值

这里就是上面所描述的:

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

现在,我们的 custom-input 组件,应该可以实现 v-model 的完美运行:

上一篇:vue动画 自定义v-前缀


下一篇:react 组件的构造函数