#javascript #vue.js #synchronization #vue-props #dynamic-properties
#javascript #vue.js #синхронизация #vue-реквизит #динамические свойства
Вопрос:
У меня есть компонент, который принимает 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 />
содержит много кода, и я не хочу его дублировать. Я также не хочу переносить коды слотов по умолчанию в новый компонент и включать его здесь.
Есть ли лучший способ справиться с этой ситуацией? Спасибо.
Ответ №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">
Комментарии:
1. Спасибо за ответ, позвольте мне попробовать это.