Question

我想在vuejs中有一个可选的双向绑定道具。这意味着我不想从父组件调用testvar.sync="syncedVariable"，因为有时我只是对父组件中testvar的值不感兴趣。但是，除非我在父级中创建一个变量并进行同步，否则无法在子级中更改它。这是根据vuejs docs进行双向绑定变量的推荐方法。

new Vue({
el: '#app',
props: {
    testvar: {
        // this is an optional prop, it doesnt have to be specified in parent component and have testvar.sync="whatever", however thats the only way it will work?
        type: String,
        default: 'hello world'
    }   
},
data () {
    return {
    }
},
computed: {
    localVar: {
        get () {
            return this.testvar
        },
        set (nv) {
            this.$emit('update:testvar', nv)
        }
    }
},
methods: {
    click () {
        alert('Text should have changed, but it didnt')
        this.localVar = 'Text has changed'
    }
}

});

Answer 1

实际上，可以进行双向绑定，但有一些限制。假设您有一个子组件并在其上有一个支撑。

<child :propName:"something"></child>

在子组件中，您将获得像这样的道具。

props : ["propName"]

但是正如您提到的，这还不是2种方式的绑定。因此，当您尝试更新某些内容时，它会发出警告。但是，如果您添加：

model : {
    prop : "propName"
}

现在实际上是2way绑定。我不知道为什么，但是您不能将其与原始类型一起使用。我的意思是，如果您的道具是int或string，您将得到相同的错误。但是，如果您使用一个对象，它将起作用。我不确定这是否是个好习惯，但是否可行。我在vue之前使用angularjs，这是我迫切想要的第一件事。这是我找到的解决方案。干杯！

Answer 2

不幸的是，答案是否定的，没有开箱即用的实际方法。

需要做的是创建一个额外的内部变量，然后编写一个计算属性以得出最终值。

这是我为解决同一问题而做的一个TS示例：

    @Prop({default: null})
    public loading: boolean | null;

    private internalLoading: boolean = false;

    private get syncLoading() {
        return (this.loading !== null) ? this.loading : this.internalLoading;
    }

如何在vuejs中有2向绑定的可选道具

2 个答案: