ホーム>source

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>

主な問題は、私がたくさんの autosuggest を持っていることです 私は instruments を持っているのでDOMで 。言い換えれば、1 autosuggest があるはずです  オプションが 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>

あなたの答え
  • 解決した方法 # 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 に渡す s。そして、 instrument   autosuggest へのリンクが届かない  (小道具で)、それは autosuggest を作成します  それ自体の中。 instrument の使用を許可します  さまざまな条件で。

    アイデアを慎重に説明する必要がある場合はお知らせください。

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ 子コンポーネントをレンダリングするか、親コンポーネントから子コンポーネントのメソッドを呼び出す、またはその逆[React Native]