自定义组件在使用 v-model 时定制 prop 和 event

在Vue.js中，自定义组件通过`v-model`特性与数据双向绑定是非常常见的。如果你想在自定义组件中定制`prop`（属性传递）和`event`（事件），你可以按照以下步骤操作：

1. **定制 Prop**:
- 定义`props`：在组件的`options`对象中，设置`props`选项来接收父组件传递的数据。例如，如果你想要接受一个名为`value`的值：

     props: {
       value: {
         type: String | Number,
         required: true, // 可选，默认为 false，表示该prop是必需的
         default: () => '', // 可选，提供默认值
         validator: (val) => { /* 进行验证 */ }, // 可选，验证函数
       }
     },

- 更新组件内部状态：当接收到`prop`时，将其绑定到组件内部的`data`属性。

2. **定制 Event**:
- 发布事件：使用`$emit`方法触发自定义事件。例如，当你想在组件状态改变时通知父组件：

     methods: {
       handleChange(newValue) {
         this.$emit('input', newValue); // 触发 input 事件并传入新的值
       }
     }

3. **使用 v-model**:
- 在模板上使用`v-model`绑定到组件的`value` prop：

     <custom-component v-model="parentValue" @input="handleParentInput"></custom-component>

- 父组件可以像处理基础元素一样监听这个事件，并更新数据。