Vue2里的v-model是啥？先搞懂双向数据绑定

怎么给自定义组件写v-model？实战封装一个搜索组件

需求：

封装一个SearchInput组件，外部用v-model绑定搜索关键词，组件内输入时同步更新，点击「清空」按钮能把关键词置空。

步骤1：用默认v-model规则实现（prop是value，事件是input）

子组件SearchInput.vue：

<template>
  <div class="search-input">
    <input 
      type="text" 
      :value="value" 
      @input="$emit('input', $event.target.value)" 
      placeholder="请输入搜索关键词"
    />
    <button @click="handleClear">清空</button>
  </div>
</template>
<script>
export default {
  props: ['value'], // 接收父组件的value
  methods: {
    handleClear() {
      this.$emit('input', ''); // 触发input事件，传空值
    }
  }
}
</script>
<style scoped>
.search-input {
  display: flex;
}
button {
  margin-left: 8px;
}
</style>

父组件使用：

<template>
  <div>
    <SearchInput v-model="searchKey"/>
    <p>当前搜索关键词：{{ searchKey }}</p>
  </div>
</template>
<script>
import SearchInput from './SearchInput.vue'
export default {
  components: { SearchInput },
  data() {
    return {
      searchKey: ''
    }
  }
}
</script>

p>这样，输入框打字时，input事件触发，searchKey更新；点击「清空」按钮，触发input事件传空值，searchKey也会变成空——完美实现双向绑定～

步骤2：用model选项自定义prop和事件名（进阶）

p>如果想让prop叫「keyword」，事件叫「change」，可以用model选项：

子组件修改：

<script>
export default {
  model: {
    prop: 'keyword',
    event: 'change'
  },
  props: ['keyword'], // prop名要和model里的prop一致
  methods: {
    handleClear() {
      this.$emit('change', ''); // 触发change事件
    }
  }
}
</script>

父组件使用：

p>还是<SearchInput v-model="searchKey"/>，但此时等价于:keyword="searchKey" @change="searchKey = $event"，这种方式适合组件内部逻辑和「value」「input」不搭的场景（比如封装开关组件，prop叫「checked」，事件叫「toggle」），能让代码更语义化～

v-model和.sync修饰符有啥不一样？

先看.sync修饰符：

它是给单个props属性做双向绑定的语法糖，比如父组件给子组件传title，子组件要更新title，用.sync的话：

<!-- 父组件 -->
<Child :title.sync="docTitle"/>

等价于：

<Child :title="docTitle" @update:title="docTitle = $event"/>

p>子组件更新时要$emit('update:title', 新值)。

再看v-model：

它是针对「输入/交互」场景的双向绑定，一个组件一般只有一个v-model（Vue2中）。.sync可以给多个props分别加双向绑定，比如同时绑定title和content：

<Child :title.sync="docTitle" :content.sync="docContent"/>

p>总结区别：

• v-model：专注「输入类」场景，语法糖是` :value + @input`（或自定义事件）；
• .sync：更灵活，用于普通props的双向更新，语法糖是` :prop + @update:prop`；
• 一个组件可以有多个.sync，但v-model通常只写一个（Vue2中）。

举个例子（封装弹窗组件）：

需求：弹窗组件Modal需要控制「显示隐藏（visible）」和「标题（title）」的双向更新。

子组件Modal.vue：

<template>
  <div v-if="visible" class="modal">
    <h3>{{ title }}</h3>
    <button @click="$emit('update:visible', false)">关闭</button>
    <button @click="$emit('update:title', '新标题')">修改标题</button>
  </div>
</template>
<script>
export default {
  props: ['visible', 'title']
}
</script>

父组件使用：

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <Modal 
      :visible.sync="showModal" 
      :title.sync="modalTitle"
    />
    <p>当前标题：{{ modalTitle }}</p>
  </div>
</template>
<script>
import Modal from './Modal.vue'
export default {
  components: { Modal },
  data() {
    return {
      showModal: false,
      modalTitle: '默认标题'
    }
  }
}
</script>

p>这里visible和title都用.sync，子组件通过$emit('update:visible', ...)和$emit('update:title', ...)更新父组件数据；而如果用v-model，一个组件只能处理一个属性的双向绑定，所以这种多属性更新的场景用.sync更合适～

实际开发中，v-model能解决哪些痛点？

表单处理：简化多输入项的双向绑定

p>比如登录页面有用户名、密码两个输入框，用v-model可以快速绑定数据：

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" placeholder="用户名" />
    <input type="password" v-model="password" placeholder="密码" />
    <button type="submit">登录</button>
  </form>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 直接用this.username和this.password发请求
      console.log('登录信息：', this.username, this.password)
    }
  }
}
</script>

p>如果不用v-model，每个输入框都要写:value和@input，代码会繁琐很多，v-model让表单和数据的绑定更简洁，减少重复代码～

自定义组件封装：让组件通信更高效

p>比如封装一个「带搜索建议的输入框」组件，用户输入时实时请求接口拿建议，选中建议后自动填充到输入框，用v-model可以让外部轻松拿到输入值：

子组件SearchWithSuggest.vue：

<template>
  <div>
    <input 
      :value="value" 
      @input="handleInput" 
      placeholder="输入关键词搜建议"
    />
    <ul v-if="suggestList.length">
      <li 
        v-for="(item, index) in suggestList" 
        :key="index" 
        @click="handleSelect(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ['value'],
  data() {
    return {
      suggestList: []
    }
  },
  methods: {
    handleInput(e) {
      const val = e.target.value
      this.$emit('input', val) // 同步输入值给父组件
      // 模拟请求接口拿建议
      setTimeout(() => {
        this.suggestList = [val + '1', val + '2', val + '3']
      }, 500)
    },
    handleSelect(item) {
      this.$emit('input', item) // 选中建议后，把item传给父组件
      this.suggestList = [] // 清空建议列表
    }
  }
}
</script>

父组件使用：

<template>
  <div>
    <SearchWithSuggest v-model="searchVal"/>
    <p>最终搜索值：{{ searchVal }}</p>
  </div>
</template>
<script>
import SearchWithSuggest from './SearchWithSuggest.vue'
export default {
  components: { SearchWithSuggest },
  data() {
    return {
      searchVal: ''
    }
  }
}
</script>

p>这样封装后，父组件不用关心子组件内部的搜索建议逻辑，只需要通过v-model拿到最终的输入值，大大提高了组件的复用性～

3