vue 仿饿了么下拉框，如何绑定slot里的值

Question

想在cusSelect.vue页面获取到cusOptions.vue的值

/* cusSelect.vue */
<template>
  <div>
    <input type="text" v-model="value">
    <ul class="select-list" v-show="isopen">
      <slot @get-value="handleSelect"></slot>
    </ul>
  </div>
</template>

<script>
  methods: {
    // 想在此处获取到value
    handleSelect (value) {
      this.value = value
    }
  }
</script>

/* cusOptions.vue */
<template>
  <li @click.stop="handleSelect">{{label}}</li>
</template>

<script>
  props: {
    value: String,
    label: String
  },
  methods: {
    handleSelect () {
      this.$emit('getValue', this.value)
    }
  }
</script>

/* pageA */
<cus-select :list="list">
  <cus-option
    v-for="item in warehouseGroup"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </cus-option>
</cus-select>

Answer 1

刚刚看了下各个组件库的实现。
一般都是在select中的created阶段绑定

created () {
  this.$on('setSelected', this.handleSelect)
}

在options里使用一个自定义的dispatch去触发这个事件

this.dispatch('父组件名', 'setSelected', '数据')

dispatch里对子组件的parent进行遍历，直到找到parent.name === '父组件名'，再使用$emit进行触发。

这是element-ui的dispatch的代码

Answer 2

自己写下拉框还是用JSX 写吧,很多需要的东西都在 $vnode.data 这个对象里面