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

推荐答案

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

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

示例代码

子组件（ChildComponent.vue）

// www.javascriptcn.com code example
<template>
  <input :value="value" @input="updateValue" />
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    updateValue(event) {
      this.$emit('input', event.target.value);
    }
  }
};
</script>

父组件（ParentComponent.vue）

// www.javascriptcn.com code example
<template>
  <child-component v-model="message" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  }
};
</script>

本题详细解读

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 选项。例如：

// www.javascriptcn.com code example
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggle() {
      this.$emit('change', !this.checked);
    }
  }
};

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

4. 注意事项

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

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