先写结论

1. 父组件通过v-model="value"绑定到子组件上
2.子组件通过this.$emit('input', val)实现双向绑定

//父组件 
<template>
      <cySelect v-model="selectvalue"></cySelect>
</template>

//子组件
this.$emit('input', val)

前言

• 在工作中我们经常会封装一些组件，一般都会使用v-bind和 v-on来进行通信，但是你有没有尝试使用v-model来进行通信呢。

• 所以，今天来学习组件中使用v-model，希望能够和大家一起学习。
  在vue官网上有这么一句话“一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，.....”
  

  自定义组件 v-model

• 下面是官网的写法

  
  
  自定义组件 v-model

官方也说明了,v-model只不过是一个语法糖而已,真正的实现靠的还是

1. v-bind : 绑定响应式数据
2. 触发 input 事件 并传递数据 (核心和重点)

大体就是:
　监听原生组件的事件, 当获取到原生组件的值后把值通过调用 $emit('input' ,data) 方法去触发 input事件

demo

• 父组件

<template>
      <cySelect v-model="selectvalue"></cySelect>
</template>
<script>
import cySelect from "./cySelect.vue";
export default {
    name: 'elementSelectName',
    components: { cySelect },
    data() {
        return {
            selectvalue: '选项2'
        };
    },
};
</script>

• 子组件

<template>
    <el-select :value="value" @change="(val) => selectChange(val)" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
</template>

<script>
export default {
    name: 'mySelect',
    props: ['value'],
    data() {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
        };
    },
    methods: {
        selectChange(val) {
            this.$emit('input', val)
            this.$emit('change', val)
        }
    }
};
</script>

结尾

• 组件借用了element的组件，只是对select进行简单封装。
• 感谢作者rachelch的《v-model 用在组件中》