在vue.js中为.sync添加条件

问题描述

我有一个具有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时，我才想使用.sync修饰符。我尝试使用具有以下计算属性的动态道具，但未按预期工作。

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

不幸的是，它没有用。 另一种选择是复制组件标签，一个使用.sync，另一个不使用，然后使用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">中的syntactic sugar

所以只需使用：

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

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

或...

<component  :options="options" @update:options="options = shouldSync ? $event : options">