在 Vue.js 中，当使用 `v-model` 指令在自定义组件上时，默认情况下，它期望组件内部有一个名为 `value` 的 prop 和一个名为 `input` 的事件，以形成双向绑定。然而，如果你想在自定义组件中监听原生事件（如 `input`、`change` 等），并希望这些事件能影响父组件中通过 `v-model` 绑定的数据，你需要手动设置 `v-model` 的 prop 和事件，并在组件内部处理这些原生事件。 ### 1. 自定义组件的 `v-model` 首先，明确 `v-model` 在自定义组件中的工作原理。默认情况下，`v-model="someData"` 会被展开为 `:value="someData" @input="someData = $event"`。但在自定义组件中，你可以自定义这些 prop 和事件。 ### 2. 监听原生事件并触发自定义事件 如果你想在自定义组件中监听原生事件（如 `input`），并希望这些事件能更新父组件的 `v-model` 绑定的数据，你可以在组件内部监听这些原生事件，并触发一个自定义事件（通常命名为 `input`），该事件将携带更新后的值。 ### 示例 假设你有一个自定义的输入框组件 `CustomInput.vue`，你希望它监听原生的 `input` 事件，并更新父组件中 `v-model` 绑定的数据。 ```vue ``` 然而，为了使这个组件能更无缝地与 `v-model` 一起工作，你可能想直接使用 `input` 事件作为自定义事件名，因为 `v-model` 默认就是监听 `input` 事件的。 ```vue ``` ### 注意 - 在 Vue 3 中，推荐的做法是使用 `modelValue` 作为 prop 和 `update:modelValue` 作为事件，以更清晰地表达这是与 `v-model` 绑定的值。然而，Vue 3 仍然支持使用 `value` 作为 prop，但建议遵循新的命名约定。 - 在 Vue 2.2.0 及以上版本中，`.sync` 修饰符提供了一种简化的方式来更新父组件的状态，但它不是 `v-model` 的直接替代品。`.sync` 修饰符允许你以 `update:propName` 的形式监听任何 prop 的变化。 通过上面的方式，你可以在 Vue.js 的自定义组件中监听原生事件，并更新父组件中通过 `v-model` 绑定的数据。