在vue自定义组件中使用v-model

之前在项目中因为要写一个form表单，用到了自定义v-model这个语法糖

先上官方文档的链接吧

v-model在自定义组件的使用

子组件(baseInput.vue)是：

<template>
    ......
    <input :value="value" @input="$emit('change', $event.target.value)" />
</template>
<script>
export default {
    model: {
        prop: 'value',   //对应 props 的 value
        event: 'change'  //对应 @input 的 change
    },
    props: {
        value: {
          type: [String, Number],
          description: 'Input value'
        },
    }
}
</script>

父组件是：

<base-input v-model="name" />

为啥要这么做呢？

一般我们在做自定义组件的时候是使用props和$emit来实现子父组件的数据交互，这么做就需要在父组件里面去定义一个方法来接收子组件的状态改变时触发的事件。

使用v-model就不必在父组件里面去监听子组件的方法，父组件可以直接获取到v-model值的改变。在上面的代码示例中，我们可以在父组建通过 watch 来监听 name 的变化，然后做相对应的逻辑处理。