vue组件支持v-model

参考文档cn.vuejs.org/v2/guide/co…

实现

v-model一般来说只能用在表单元素上，某些情况下，我们也想让组件支持v-model，可以用以下方法

组件代码

<template>
  <div class="custom-input">
    <input :value="value" @input="$emit('input', $event.target.value)"/>
  </div>
</template>

<script>
export default {
  name: 'CustomInput',
  props: ['value']  // 在使用组件的时候，传过来的值
}
</script>

使用

<template>
  <div id="app">
    <!-- 组件使用v-model -->  
	<custom-input v-model="searchText" />
  </div>
</template>

<script>
import CustomInput from '@/components/CustomInput'
export default {
  components: {
    CustomInput
  },
  data() {
    return {
      searchText: ''
    }
  }
}
</script>

组件上使用v-model的原理是什么呢？

当用在组件上时，v-model 则会这样：

<!-- 此时的$event就是子组件通过$emit发送过来的$event.target.value  -->
<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

子组件通过$emit发送input事件时，父级组件监听到input事件的时候，我们可以通过 $event 访问到子组件通过$emit发送过来值

如果这个事件处理函数是一个方法，那么子组件通过$emit发送过来值会作为方法的第一个参数传过来

<template>
  <div id="app">
    <custom-input :value="searchText" @input="handleInput" />
  </div>
</template>

<script>
import CustomInput from '@/components/CustomInput'
export default {
  components: {
    CustomInput
  },
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    handleInput(value) {
      // 此时的value就是子组件通过$emit发送过来的$event.target.value  
      this.searchText = value
    }
  }
}
</script>