vue3 组件响应式v-model 失效，实践踩坑，一文搞懂组件响应式原理，对初学者友好

在Vue 3中，如果你遇到组件的v-model失效问题，可能是因为组件内部没有正确实现响应式。以下是一些可能的原因和解决方法：

1. 确保组件内部使用props和emit来创建v-model。

组件应该通过定义props来接受父组件的值，并通过emit触发update:myModel事件来更新这个值。

// 子组件
export default {
  props: {
    myModel: {
      type: String,
      default: ''
    }
  },
  methods: {
    updateValue(value) {
      this.$emit('update:myModel', value);
    }
  },
  template: `<input :value="myModel" @input="updateValue($event.target.value)">`
};
 
// 父组件
<custom-component v-model="parentValue"></custom-component>

2. 确保v-model绑定的值是响应式的。

如果v-model绑定的是非响应式的属性，那么v-model可能不会工作。确保绑定的是一个响应式的数据。

import { reactive } from 'vue';
 
export default {
  setup() {
    const state = reactive({
      modelValue: ''
    });
 
    // 返回响应式数据
    return {
      ...toRefs(state)
    };
  }
};

3. 使用setup函数和toRefs确保内部状态是可以被追踪的。

如果你在组件内部使用了setup函数，并且想要使用v-model，确保你正确地使用了toRefs来暴露响应式状态。

import { toRefs } from 'vue';
 
export default {
  props: {
    modelValue: String
  },
  setup(props, { emit }) {
    const updateValue = (value) => {
      emit('update:modelValue', value);
    };
 
    return {
      ...toRefs(props),
      updateValue
    };
  }
};

如果遵循以上步骤后v-model仍然不工作，请检查是否有其他代码逻辑影响了响应式系统，例如直接修改了props而不是使用emit。

总结，要使v-model在Vue 3组件中工作，你需要确保：

• 组件通过props接收值，并通过emit触发更新事件。
• 使用setup函数并通过toRefs正确地暴露响应式数据。
• 绑定到v-model的是响应式数据。