vue el-select value和lable背后是怎么实现的

Question

比如选择的是黄金糕，但是el-select v-model="value"的value是对应的'选项1'请问背后怎么实现的
这个el-select其实已经有了，但我是自己封装select组件不知道怎么实现它，谢谢各位。

template

<el-select v-model="value" placeholder="请选择">  
    <el-option 
        v-for="item in options" 
        :key="item.value" 
        :label="item.label" 
        :value="item.value" >  
    </el-option>  
</el-select>

js

options: [{ value: '选项1', label: '黄金糕' }, 
          { value: '选项2', label: '双皮奶' }, 
          { value: '选项3', label: '蚵仔煎' }]

Answer 1

我写了个简单的Demo封装了一个类似的组件，基本涉及的知识点不多
1、插槽slot 的使用
2、v-model 语法糖的实现机制
不过element-select肯定不仅仅这些就实现的，还涉及到 provide/inject
这里我只是给实现的其中一个思路。

---

子组件

<template>
  <option :value="value">{{label}}</option>
</template>
<script>
  export default {
    props: ['value', 'label'],
  }
</script>

父组件

<template>
  <select @change="change">
    <slot></slot>
  </select>
</template>

<script>
  export default {
    props: ['value'],
    mounted(){
      let a = document.getElementsByTagName('select')
      a[0].value = this.value
    },
    methods:{
      change(val){
        this.$emit('input',val.target.value)
      }
    }
  }
</script>

Demo

<template>
  <zx-select v-model="selected">
    <zx-option :value="1" label="a"></zx-option>
    <zx-option :value="2" label="b"></zx-option>
    <zx-option :value="3" label="c"></zx-option>
  </zx-select>
</template>
<script>
  import ZxSelect from './zx-select'
  import ZxOption from './zx-option'
  export default {
    components: {
      ZxSelect,
      ZxOption
    },
    data(){
      return{
        selected:3
      }
    },
    watch:{
      selected(val){
        console.log(val)
      }
    }
  }
</script>