面试题：Vue复杂表单中v-model与自定义组件结合使用

1. 在自定义组件中使用 v-model 实现双向绑定

在 Vue 中，v-model 本质上是一个语法糖。对于自定义组件，使用 v-model 实现双向绑定主要涉及以下步骤：

子组件接收 value 属性：在子组件的 props 中定义 value，用于接收父组件传递的值。

<template>
  <div>
    <!-- 这里展示地址信息的输入框或选择框等 -->
  </div>
</template>

<script>
export default {
  props: ['value']
}
</script>

子组件触发 input 事件：当子组件内数据发生变化时，通过 $emit('input', newVal) 触发 input 事件，并将新的值传递出去，这样父组件绑定的 v-model 就能接收到最新的值。

<template>
  <div>
    <select @change="handleChange">
      <option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
    </select>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      options: []
    }
  },
  methods: {
    handleChange(e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

父组件使用 v-model：在父组件中，直接在自定义组件上使用 v-model 来绑定数据。

<template>
  <div>
    <address - component v-model="address"></address - component>
  </div>
</template>

<script>
import AddressComponent from './components/AddressComponent.vue'
export default {
  components: {
    AddressComponent
  },
  data() {
    return {
      address: ''
    }
  }
}
</script>

2. 可能遇到的问题及解决方案

问题 1：初始值传递问题

描述：如果父组件传递给子组件的初始 value 没有正确处理，可能导致子组件初始化时数据显示异常。
解决方案：确保子组件在 created 或 mounted 钩子函数中，根据接收到的 value 进行正确的初始化操作。例如，如果 value 是一个对象，可能需要对对象的属性进行深度拷贝等处理，以防止引用类型数据共享带来的问题。

export default {
  props: ['value'],
  data() {
    return {
      localValue: {}
    }
  },
  created() {
    // 如果 value 是对象，进行深度拷贝
    this.localValue = JSON.parse(JSON.stringify(this.value))
  }
}

问题 2：事件触发时机问题

描述：子组件触发 input 事件的时机可能不准确，例如过早或过晚触发，导致数据同步不及时。
解决方案：仔细分析业务逻辑，确定合适的事件触发时机。对于表单输入元素，通常在 change 或 input 事件中触发 input 事件。同时，可以使用防抖（debounce）或节流（throttle）技术来优化频繁触发的情况，防止不必要的性能消耗。例如，对于输入框输入触发 input 事件时，可以使用防抖：

<template>
  <div>
    <input @input="debouncedHandleChange" />
  </div>
</template>

<script>
import { debounce } from 'lodash'
export default {
  props: ['value'],
  methods: {
    handleChange(e) {
      this.$emit('input', e.target.value)
    },
    debouncedHandleChange: debounce(function (e) {
      this.handleChange(e)
    }, 300)
  }
}
</script>

问题 3：多个 v-model 冲突问题

描述：当在同一个自定义组件上使用多个 v-model 绑定不同数据时，可能会出现数据混乱和冲突。
解决方案：Vue 2.2.0+ 开始支持在自定义组件上使用多个 v-model，通过 model 选项可以指定不同的 prop 和 event。例如：

<template>
  <div>
    <input :value="prop1" @input="$emit('update:prop1', $event.target.value)" />
    <input :value="prop2" @input="$emit('update:prop2', $event.target.value)" />
  </div>
</template>

<script>
export default {
  props: ['prop1', 'prop2'],
  model: {
    prop: 'prop1',
    event: 'update:prop1'
  },
  model2: {
    prop: 'prop2',
    event: 'update:prop2'
  }
}
</script>

在父组件中使用：

<template>
  <div>
    <custom - component v-model="data1" v-model:prop2="data2"></custom - component>
  </div>
</template>

<script>
import CustomComponent from './CustomComponent.vue'
export default {
  components: {
    CustomComponent
  },
  data() {
    return {
      data1: '',
      data2: ''
    }
  }
}
</script>

星途面试题库

面试题：Vue复杂表单中v-model与自定义组件结合使用

知识考点

面试题答案

1. 在自定义组件中使用 v-model 实现双向绑定

2. 可能遇到的问题及解决方案