vue中v-model自定义输入组件的编写

子组件代码如下（此处以input输入框为例）

<template>
    <div class="base-input-container">
        <input type="text" :value="inputValue" @input="$emit('input', $event.target.value)">
    </div>
</template>
<script>
    export default {
        props: {
            inputValue: {
                type: String,
                default: ''
            }
        },
        model: {
            prop: 'inputValue',
            event: 'input'
        },
        data() {
            return {
                
            }
        }
    }
</script>
<style scoped>
    .base-input-container {
        background-color: #fff;
        height: 40px;
    }
    .base-input-container input {
        height: 40px;
        padding-left: 10px;
        width: 200px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
</style>

使用代码如下

第一步（引入）

  每个人的项目路径可能不同，不要看我的路径，这里讲的是方法；![在这里插入图片描述](https://img-blog.csdnimg.cn/20190115101642294.png)

第二步 （注册组件）

 组件引入后，必须在components里面注册之后才可以使用；![在这里插入图片描述](https://img-blog.csdnimg.cn/20190115101803457.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5NDY1OA==,size_16,color_FFFFFF,t_70)

第三步（绑定父组件data里的数据）

通过v-model的数据绑定形式使用组件，再写个按钮打印出来；![在这里插入图片描述](https://img-blog.csdnimg.cn/20190115102440260.png)![在这里插入图片描述](https://img-blog.csdnimg.cn/20190115102620217.png)

第四步（数据打印验证）

使用组件，注册事件，打印结果![在这里插入图片描述](https://img-blog.csdnimg.cn/20190115103059153.png)

结果

结果如图![在这里插入图片描述](https://img-blog.csdnimg.cn/20190115103129866.png)

资料查找

vue关于v-model自定义组件的介绍
其实这些东西vue官网上都有的，只是有很多初学者可能不太熟悉，看官网的时候不太明白，所以容易出错。这不是什么大问题，切记心浮气躁。无论是谁都是从不会到会的，等用熟了，再回头看官网的东西就可以看懂了，而且每次看都有不一样的感觉；