在组件上使用v-model

最近写了个select组件，添加了几个功能，如option过滤，设置默认值，添加change方法告知父组件等。
然后，提交后被返工了 💔
现在，重新审视自己的代码。发现最大的问题就是代码冗余：
我并没有在父组件上使用v-model,所有的数据改变都是通过子组件change调用父组件方法，再去改变父组件的数据。
如果有多个select，那就需要添加多个方法，接收每个select改变后的值，再改变父组件的数据。
糟糕的代码就不展示了
现在开始整理自己的思路～

在`input`上使用`v-model`

首先，我们需要了解的是，

1	<input type="text" v-model="searchText"/>

等价于

1	<input type="text" :value="searchText" @input="searchText = $event.target.value"/>

组件中

1	<test-input v-model="searchText"></test-input>

等价于

1	<test-input :value="searchText" @input="searchText = $event"></test-input>

如果你的组件是这样的：

<template>
    <input type="text" v-model="searchText"/>
</template>
<script>
export default {
    name: 'TestInput',
    data () {
        return {
            searchText : ''
        }
    }
}
</script>

那么，使用如下代码并不会实现数据绑定。

<template>
  <div>
    <test-input v-model="inputValue"></test-input>
    {{ inputValue }}
  </div>
</template>
<script>
import TestInput from '@/components/Input.vue'
export default {
  data () {
    return {
      inputValue: '初始写的值'
    }
  },
  components: {
    TestInput
  }
}
</script>

接下来，我们尝试进行双向绑定

对组件进行修改：

1	<input type="text" :value="searchText" @input="searchText = $event.target.value"/>

划重点：

将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

代码如下：

<template>
    <div>
        <input
            type="text"
            :value="searchText"
            @input="$emit('input',$event.target.value)"/>
    </div>
</template>
<script>
export default {
    props: ['value'],
    data () {
        return {
            searchText : ''
        }
    }
}
</script>

再次看一下调用组件的代码

1	<test-input v-model="inputValue"></test-input>

它相当于

1	<test-input :value="inputValue" @input="inputValue = $event"></test-input>

个人解释👇
这样，input会把组件的inputValue作为它的value值，同时，当input元素发生输入改变事件时，会通知父组件修改其value值。这样就实现了双向绑定。

官方解释👇
这里的 inputValue 的值将会传入这个名为 value 的 prop。同时当 <test-input> 触发一个 input 事件并附带一个新的值的时候，这个 inputValue 的属性将会被更新。

在`checkbox`上使用`v-model`

一个组件上的 v-model 默认会利用名为 value的 prop和名为 input 的事件。
但是像单选框、复选框等类型的输入控件可能会将 value特性用于不同的目的。model 选项可以用来避免这样的冲突：
组件代码：

<template>
    <input 
        type="checkbox"
        :checked="checked"
        @change="$emit('change',$event.target.checked)"
    />
</template>
<script>
export default {
    model: {
        prop: 'checked',
        event: 'change'
    },
    props: ['checked'],
    data () {
        return {
            checked: false
        }
    }
}
</script>

更多组件的特性还需要深入了解～fighting

在input上使用v-model

在checkbox上使用v-model

在`input`上使用`v-model`

在`checkbox`上使用`v-model`