Vue 中如何使用 v-model 实现自定义组件的双向绑定?
在 Vue 中,使用 v-model
实现自定义组件的双向绑定需要遵循一套特定的规则。以下是关于如何实现这一功能的详细步骤和示例。
1. 理解 v-model
在 Vue 中,v-model
实际上是语法糖,它在内部实现了 :value
和 @input
的结合。使用 v-model
的自定义组件需要支持以下两个属性:
value
:用于接收父组件传递的数据。input
:用于向父组件发送更新事件。
2. 创建自定义组件
假设我们要创建一个名为 CustomInput
的自定义组件,以便在父组件中使用 v-model
进行双向绑定。
CustomInput.vue
<template>
<div>
<input
type="text"
:value="value"
@input="updat