0

プロパティを取るコンポーネントがありoptionsます。オプションは同期できます。以下に説明するとおりです。

<component :options.sync="options">...</component>

コンポーネントは、 shouldSync プロパティを持つ親コンポーネント内にあります。以下に説明するように：

<template>
    <div>
        <component :options.sync="options">...</component>
    </div>
</template>
<script>
    export default {
        name: 'parent',
        props: ['shouldSync']
    }
</script>

親コンポーネントの shouldSync プロパティが .sync の場合にのみ .sync 修飾子を使用したいtrue。以下のように計算されたプロパティを持つ動的な小道具を使用しようとしましたが、期待どおりに機能しませんでした。

<template>
    <div>
        <component :[optionsProp]="options">...</component>
    </div>
</template>
<script>
    export default {
        name: 'parent',
        props: ['shouldSync'],
        computed: {
            optionsProp: () => {
                return this.shouldSync ? 'options.sync' : 'options'
            }
        }
    }
</script>

残念ながら、うまくいきませんでした。もう 1 つの方法は、コンポーネント タグを .sync を含むものと含まないものを複製し、v-if ディレクティブを使用してどちらを使用するかを決定することです。以下に説明するように：

<template>
    <div>
        <component v-if="shouldSync" :options.sync="options">...</component>
        <component v-else :options="options">...</component>
    </div>
</template>

しかし、のデフォルトのスロットに<component />は多くのコードが含まれており、それを複製したくないため、これを行いたくありません。また、デフォルトのスロット コードを新しいコンポーネントに転送して、ここに含めたくありません。

この状況を処理するためのより良い方法はありますか? ありがとう。

4

1 に答える 1

1

<component :options.sync="options">は単なるシンタックスシュガーです<component :options="options" @update:options="options = $event">

したがって、次を使用してください：

<component  :options="options" @update:options="onUpdateOptions">

methods: {
  onUpdateOptions(newValue) {
    if(this.shouldSync)
      this.options = newValue
  }
}

また...

<component  :options="options" @update:options="options = shouldSync ? $event : options">
于 2020-10-17T13:39:06.280 に答える