在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue 仿餓了么下拉框,如何綁定slot里的值

vue 仿餓了么下拉框,如何綁定slot里的值

想在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>
回答
編輯回答
愛礙唉

剛剛看了下各個(gè)組件庫的實(shí)現(xiàn)。
一般都是在select中的created階段綁定

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

在options里使用一個(gè)自定義的dispatch去觸發(fā)這個(gè)事件

this.dispatch('父組件名', 'setSelected', '數(shù)據(jù)')

dispatch里對(duì)子組件的parent進(jìn)行遍歷,直到找到parent.name === '父組件名',再使用$emit進(jìn)行觸發(fā)。

這是element-ui的dispatch的代碼

2017年8月29日 21:08
編輯回答
祈歡

自己寫下拉框還是用JSX 寫吧,很多需要的東西都在 $vnode.data 這個(gè)對(duì)象里面

2017年2月25日 21:30