Vue自定义组件触发input emit时报TypeError: Cannot read property 'value' of null

首先，你遇到的TypeError: Cannot read property 'value' of null错误，核心原因大概率是组件内直接操作了value prop、父组件初始绑定值为null，或者模板中错误绑定了null值的属性。以下是具体排查和解决步骤：

1. 禁止直接修改value Prop #

Vue的prop是单向数据流，不能直接修改。如果你在组件内直接做this.value.name = xxx，再emit这个value，一旦父组件传入的初始值是null，就会触发“读取null的属性”错误。

错误示例： #

<script>
export default {
  props: ['value'],
  methods: {
    handleInput(e) {
      this.value.name = e.target.value // 直接修改prop，违反单向数据流
      this.$emit('input', this.value)
    }
  }
}
</script>

正确做法： #

创建本地数据副本，修改副本后再emit：

<template>
  <div>
    <input v-model="localData.id" @input="emitUpdatedData">
    <input v-model="localData.name" @input="emitUpdatedData">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      required: true,
      // 提供默认值，防止父组件传入null
      default: () => ({ id: '', name: '' })
    }
  },
  data() {
    return {
      // 复制prop到本地数据
      localData: { ...this.value }
    }
  },
  methods: {
    emitUpdatedData() {
      // emit深拷贝后的对象，避免引用同步问题
      this.$emit('input', JSON.parse(JSON.stringify(this.localData)))
    }
  },
  // 同步父组件的value更新到本地数据
  watch: {
    value(newVal) {
      this.localData = { ...newVal }
    }
  }
}
</script>

2. 检查父组件初始绑定值 #

如果父组件中v-model绑定的变量初始为null，比如：

// 父组件
<script>
export default {
  data() {
    return {
      item: null // 初始值为null
    }
  }
}
</script>

此时组件的value prop会是null，当组件尝试访问this.value.id或复制到本地数据时，就会触发错误。

修正： #

父组件初始值必须是包含id和name的对象：

// 父组件
<script>
export default {
  data() {
    return {
      item: { id: '', name: '' } // 初始化为空对象
    }
  }
}
</script>

3. 检查模板中的属性绑定 #

如果模板中直接绑定value的属性，比如：

<template>
  <input :value="value.name"> <!-- 当value为null时，访问value.name会报错 -->
</template>

必须改为绑定本地数据的属性：

<template>
  <input :value="localData.name">
</template>

4. Vue 3 注意事项 #

如果用Vue 3，v-model默认语法已变更为modelValue prop和update:modelValue事件，不要继续用Vue 2的value和input：

<template>
  <input v-model="localData.name" @input="emitUpdate">
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
    default: () => ({ id: '', name: '' })
  }
})

const emit = defineEmits(['update:modelValue'])
const localData = ref({ ...props.modelValue })

watch(() => props.modelValue, (newVal) => {
  localData.value = { ...newVal }
}, { deep: true })

const emitUpdate = () => {
  emit('update:modelValue', { ...localData.value })
}
</script>

内容的提问来源于stack exchange，提问作者Bikutaa