Как иметь 2-х стороннюю ДОПОЛНИТЕЛЬНУЮ опору в vuejs - PullRequest
0 голосов
/ 26 ноября 2018

Я бы хотел иметь опциональную двухстороннюю привязку в vuejs.Это означает, что мне не нужно вызывать testvar.sync="syncedVariable" из родительского компонента, поскольку иногда мне просто не интересно значение testvar в родительском компоненте.Но если я не создаю переменную в родительском и не синхронизирую ее, я не могу изменить ее изнутри дочернего элемента.Это рекомендуемый способ создания двухсторонних связанных переменных в соответствии с vuejs документами .

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'
    }
}

});

1 Ответ

0 голосов
/ 27 ноября 2018

На самом деле возможна двухсторонняя привязка, но с некоторыми ограничениями.Предположим, что у вас есть дочерний компонент и есть опора.

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

В дочернем компоненте вы получаете опору, подобную этой.

props : ["propName"]

Но, как вы упомянули, это не 2Кстати, связывания пока нет.Поэтому, когда вы пытаетесь что-то обновить, выдается предупреждение.Но если вы добавите:

model : {
    prop : "propName"
}

Теперь это фактически двухсторонняя привязка.Я не знаю почему, но вы не можете использовать его с примитивными типами.Я имею в виду, если ваша опора int или string, вы получите ту же ошибку.Но если вы используете объект, он работает.Я не уверен, что это хорошая практика, но она работает.Я использовал angularjs до vue, и это было первое, чего я отчаянно хотел.Это решение, которое я нашел.Ура !!

...