vue进阶之组件使用v-model（2020疫情后）

资料参阅vue官网

某人微博

---

 

1.首先

1.了解input绑定的v-model实质

//v-model为表单元素输入的双向绑定，在input中

<input v-model="searchText">

等价于

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

//1.将输入框的值绑定到searchText变量上，这个是单向绑定，意味着改变searchText变量的值可以改变input的value，但是改变value不能改变searchText

//2.监听input事件（input输入框都有该事件，当输入内容时自动触发该事件），当输入框输入内容就单向改变searchText的值

这样便实现了数据双向绑定

2，在组件上时使用v-model

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

等价于

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

其实就是把组件当作一个输入框

所以输入框内就要完成两个动作

1.接受value（用props）

2.在 value的值发生改变的时候 向外触发 并抛出新值

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

 当组件内部value被占用

可以组件内部设置model属性

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})