uni-app 中如何在自定义组件上使用 v-model？

推荐答案

在 uni-app 中，自定义组件上使用 v-model 可以通过以下步骤实现：

1. 在子组件中定义 model 选项：通过 model 选项指定 prop 和 event，用于与父组件进行双向绑定。
2. 在子组件中使用 props 接收父组件传递的值：通过 props 接收父组件传递的值，并在子组件中使用。
3. 在子组件中触发事件：当子组件内部的值发生变化时，通过 $emit 触发事件，将新的值传递给父组件。

示例代码

子组件（ChildComponent.vue）

-- -------------------- ---- -------
----------
  ------ -------------- -------------------- --
-----------

--------
------ ------- -
  ------ -
    ------ -
      ----- -------
      -------- --
    -
  --
  -------- -
    ------------------ -
      ------------------- --------------------
    -
  -
--
---------

父组件（ParentComponent.vue）

-- -------------------- ---- -------
----------
  ---------------- ----------------- --
-----------

--------
------ -------------- ---- -----------------------

------ ------- -
  ----------- -
    --------------
  --
  ------ -
    ------ -
      -------- --
    --
  -
--
---------

本题详细解读

1. v-model 的工作原理

v-model 是 Vue.js 中用于实现双向数据绑定的语法糖。在表单元素上，v-model 默认绑定 value 属性，并监听 input 事件。当用户输入时，input 事件会触发，更新绑定的数据。

2. 自定义组件中的 v-model

在自定义组件中使用 v-model 时，Vue 默认会将 value 作为 prop 传递给子组件，并监听 input 事件。因此，子组件需要通过 props 接收 value，并在值发生变化时通过 $emit 触发 input 事件。

3. model 选项

如果希望自定义 v-model 的 prop 和 event，可以在子组件中使用 model 选项。例如：

-- -------------------- ---- -------
------ ------- -
  ------ -
    ----- ----------
    ------ --------
  --
  ------ -
    -------- -
      ----- --------
      -------- -----
    -
  --
  -------- -
    -------- -
      -------------------- ---------------
    -
  -
--

在这个例子中，v-model 会绑定 checked prop，并监听 change 事件。

4. 注意事项

• 确保子组件中正确使用 props 接收父组件传递的值。
• 在子组件中，通过 $emit 触发的事件名称必须与 model 选项中定义的 event 一致。
• 如果不需要自定义 prop 和 event，可以直接使用默认的 value 和 input。

通过以上步骤，你可以在 uni-app 的自定义组件中成功使用 v-model 实现双向数据绑定。