如何从组件（b-card）传递选定的选项并将其传递给vue中的多选组件

Question

我想将数据从 b-card 组件传递到 multiselect-vue 并与标签/输入事件一起使用

这是我的多选组件

<multiselect
    class="display-controls"
    track-by="id"
    :value="value"
    :multiple="isMultiple"
    :placeholder="placeholder"
    :options="options"
    :options-limit="20"
    :internal-search="internalSearch"
    :selectLabel="$t('selectLabel')"
    :taggable="isTaggable"
    :customLabel="$utils.handleCustomLabel"
    :max="handleMax"
    :tagPlaceholder="$t('msTagPlaceholder')"
    :loading="isSearching"
    @input="handleInput"
    @search-change="handleSearchChange"
    @close="handleClose"
    @remove="handleTagPlaceholders"
    @tag="handleTag"
    @open="$utils.msHandleOpen"
    open-direction="bottom"
    :showLabels="false"
>

这是我的 b 卡，其中包含我要传递数据的选项

<b-card id="result-modal" align="left" @click="handleFormResultClick(entity.name || entity.title)" v-for="entity in options" :key="entity.id" :title="entity.name || entity.title" no-body class="overflow-hidden" style="max-width: 100%; border: none; cursor: pointer">

            <!-- Option for Book -->
            <b-row v-if="isBook" align-v="center" no-gutters>
              <b-col v-if="languageComponent === 'En'" align-self="center" md="12">
                <b-card-body class="card-list" style="padding-right: 0; padding-left: 0">
                  <b-card-text v-if="entity.title_en" id="list-modal">
                    <span v-html="highlightChar(entity.title_en)"></span>
                    <b-card-text v-if="entity.primary_publisher.name_en" class="list-in-indo">
                      Published by : {{ entity.primary_publisher.name_en }} in {{ entity.year_published }}
                    </b-card-text>
                    <b-card-text v-else class="list-in-indo">
                      Published by : {{ entity.primary_publisher.name }} in {{ entity.year_published }}
                    </b-card-text>
                  </b-card-text>
                  <b-card-text v-else-if="!entity.title_en" id="list-modal">
                    <span v-html="highlightChar(entity.title)"></span>
                    <b-card-text v-if="entity.primary_publisher.name_en" class="list-in-indo">
                      Published by : {{ entity.primary_publisher.name_en }} in {{ entity.year_published }}
                    </b-card-text>
                    <b-card-text v-else class="list-in-indo">
                      Published by : {{ entity.primary_publisher.name }} in {{ entity.year_published }}
                    </b-card-text>
                  </b-card-text>
                </b-card-body>
              </b-col>
              <b-col v-if="languageComponent === 'Id'" align-self="center" md="12">
                <b-card-body class="card-list" style="padding-right: 0; padding-left: 0">
                  <b-card-text v-if="entity.title_ind" id="list-modal">
                    <span v-html="highlightChar(entity.title_ind)"></span>
                    <b-card-text v-if="entity.primary_publisher.name_ind" class="list-in-indo">
                      Penerbit : {{ entity.primary_publisher.name_ind }}, pada {{ entity.year_published }}
                    </b-card-text>
                    <b-card-text v-else class="list-in-indo">
                      Penerbit : {{ entity.primary_publisher.name }}, pada {{ entity.year_published }}
                    </b-card-text>
                  </b-card-text>
                  <b-card-text v-else-if="!entity.title_ind" id="list-modal">
                    <span v-html="highlightChar(entity.title)"></span>
                    <b-card-text v-if="entity.primary_publisher.name_ind" class="list-in-indo">
                      Penerbit : {{ entity.primary_publisher.name_ind }}, pada {{ entity.year_published }}
                    </b-card-text>
                    <b-card-text v-else class="list-in-indo">
                      Penerbit : {{ entity.primary_publisher.name }}, pada {{ entity.year_published }}
                    </b-card-text>
                  </b-card-text>
                </b-card-body>
              </b-col>
            </b-row>
</b-card>

这是我尝试让 Input 和 Tag 从多选列表中选择，以及 handleFormResultClick 方法从 b-card 中选择查询并将其传递给多选组件

handleInput (query) {
  this.$emit('input', query)
  this.$emit('selected', query)
  console.log(query)
},

handleTag (query) {
  const obj = {
    id: `${this.model.charAt(0)}_${this.$utils.genRandomString()}`,
    isCustom: true,
  }
  const title = _.startCase(query)

  if (this.model === 'or' || this.model === 'conference' || this.model === 'organisation') {
    obj.name = title
  } else {
    obj.title = title
  }

  if (this.isMultiple) {
    const inputValMulti = this.value.push(obj)
    this.searchQuery = ''
    console.log(inputValMulti)
  } else {
    const inputValSolo = this.handleInput(obj)
    this.searchQuery = ''
    console.log(inputValSolo)
  }
},

handleFormResultClick (query) {
  const searchEntitySubmit = query
  clearTimeout()
  setTimeout(() => {
    this.$emit('selected', query)
    this.taggingSubmit = searchEntitySubmit
    this.handleTag(value)
    console.log(value)
  }, 100)
  this.showModalEntityResult = false
},

在某些情况下，主要功能 (handleFormResultClick) 设计用于

• 从 b-card 数据中获取值，然后
• 将其传递到多选中（无论是单标签还是多标签

我怎样才能做到这一点？

感谢您的帮助！

Answer 1

您可以通过 vuex 或 eventBus 传递数据。您没有显示 vuex strore 的逻辑，但显示了发射，所以我将显示 eventBus 逻辑。我跳过了任何数据转换逻辑，我只是​​展示了如何传递数据。

在您的main.js 文件中，您需要声明您的eventBus。它必须在声明 Vue 应用程序之前声明。

export const eventBus = new Vue(); // this must come before creating Vue app
new Vue({ 
  el: '#app',
  render: h => h(App)
})

在both您的组件中，您需要导入eventBus：

import {eventBus} from '<path to main.js>'

在b-card 组件中，您可以使用自己选择的方法发出数据，我在此示例中使用了handleFormResultClick：

handleFormResultClick () { 
  eventBus.$emit('selected', query) // where query is the data you want to pass
}

在multiselect 组件中，您需要使用created 生命周期挂钩为您的事件设置监听器。 $on 方法将 callbcak 函数作为参数，您可以在其中访问从其他组件传递的数据并可以在那里处理它们：

created() {
    eventBus.$on('selected', (query) => {
        // process your query data in this callback function
    })
}