Блог

У меня есть компонент, который принимает 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 родительского компонента является true . Я попытался использовать динамический prop с вычисляемым свойством, как показано ниже, но он не работал так, как ожидалось.

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

К сожалению, это не сработало.
Другой альтернативой было бы дублировать тег компонента, один с .синхронизируйте, а другой без, и используйте директиву v-if, чтобы определить, какой из них использовать. Как описано ниже:

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

Но я не хочу этого делать, потому что слот по умолчанию <component /> содержит много кода, и я не хочу его дублировать. Я также не хочу переносить коды слотов по умолчанию в новый компонент и включать его здесь.

Есть ли лучший способ справиться с этой ситуацией? Спасибо.

<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">