Question

我有一个instruments列表，当用户键入内容时，该列表应在c-input窗口中显示autosuggest。另外，我需要为c-input提供一个选项来添加或删除autosuggest组件。

/* instrument component */

<template>
    <c-input ref="input"
      :values="inputValue"
      :placeholder="placeholder"
      @input="onInput"
      @change="onChangeInput"
      @reset="reset" />
    <autosuggest
      v-if="showSuggests"
      :inputValue="inputValue"
      :suggests="suggests"
      @onSelectRic="selectRicFromList"
    ></autosuggest>
  </div>
</template>

<script>
  export default {
    name: 'instrument',
    data: () => ({
      suggests: [],
      inputValue: '',
    }),
    computed: {
      showSuggests() {
        return this.isNeedAutosuggest && this.showList;
      },
      showList() {
        return this.$store.state.autosuggest.show;
      },
      isloading() {
        return this.$store.state.instruments.showLoading;
      },
      defaultValue() {
        if (this.instrument.name) {
          return this.instrument.name;
        }

        return '';
      },
    },
    [...]
  };
</script>

这是父组件：

<template>
  <div>
    <instrument v-for="(instrument, index) in instruments"
          :key="instrument.name"
          :instrument="instrument"
          :placeholder="$t('change_instrument')"
          :isNeedAutosuggest="true" /> <!--that flag should manage an autosuggest option-->
    <instrument v-if="instruments.length < maxInstruments"
          ref="newInstrument"
          :isNeedAutosuggest="true" <!-- here too -->
          :placeholder="$t('instrument-panel.ADD_INSTRUMENT')" />
  </div>
</template>

主要问题是，我在DOM中有autosuggest个instruments。换句话说，当选项为autosuggest时，应该有1个true组件。将autosuggest移到父级是不好的，因为它具有灵活性，并且在逻辑上与c-input有很多联系。

您有任何想法吗？

[更新]

这是我要解决的方法；

我创建了另一个包装input和autosuggest组件的组件。如果需要使用input和autosuggest来使用input，则可以使用简单的/* wrapper.vue - inserted into the Instrument.vue*/ <template> <span> <fc-input ref="input" :values="value" :placeholder="placeholder" :isloading="isloading" @input="onInput" @changeInput="$emit('change', $event)" @resetInput="onResetInput" /> <fc-autosuggest v-if="isSuggestsExist" :suggests="suggests" /> </span> </template>。

"name": "name",
"type": "Microsoft.Sql/servers",
"location": "[resourceGroup().location]",
"apiVersion": "2014-04-01",
"properties": {
    "administratorLogin": "somelogin",
    "administratorLoginPassword": "somepasswordD1!"
}

Answer 1

如果您在每个instrument组件内创建一个函数，则将执行此操作，该函数将调用父组件并搜索第一个组件instrument以找到autosuggest。功能将是这样的：

name: 'instrument',
...
computed: {
    autosuggestComponent () {

        // this is a pseudo code
        const parentChildrenComponents = this.$parent.children();
        const firstChild = parentChildrenComponents[0];
        const autosuggestEl = firstChild.$el.getElementsByTagName('autosuggest')[0];

        // return Vue component
        return autosuggestEl.__vue__;
    }   
},
methods: {
    useAutosuggestComponent () {
        this.autosuggestComponent.inputValue = this.inputValue;
        this.autosuggestComponent.suggests = [{...}];
    }
}

此解决方案并不是很漂亮，但是可以将逻辑保留在instrument组件中。

但是我的建议是创建一些父组件，其中将包含instrument个组件，我建议通过父组件使用autosuggest。您可以在父级中创建autosuggest组件，并将其传递给子级instrument。而且，如果instrument未收到指向autosuggest的链接（在道具中），它将在其内部创建autosuggest。它将允许在不同条件下使用instrument。

让我知道是否需要仔细解释我的想法。

获得多个组件而不是一个。它们是从列表中呈现的。 vue.js

1 个答案: