Общее значение v-модели между дочерним и родительским
У меня есть компонент, который разделяет v-model то же, что и родительский компонент. Код выглядит следующим образом:
Vue.component('greeting', {
template: '<input type = "text" :name = "name" v-on:input = "updateSearch($event.target.value)"> ' ,
props: ['name'],
methods: {
updateSearch: function(value) {
this.$emit('input', value);
}
}
});
const app = new Vue({
el: '#app',
data: {
name: ''
}
});<script src = "https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id = "app">
Child: <greeting v-model = "name"></greeting>
<br><br><br>
Main: <input type = "text" v-model = "name" placeholder = "" />
</div>Я хочу обновить оба поля ввода, если пользователь вводит текст в любом из них. Любые предложения будут полезны.
Извиняюсь. Я не понял тебя. не могли бы вы привести пример?
не уверен, что это то, что вам нужно jsfiddle.net/dumz8vxf
@КрисЛи Да. точно. Большое спасибо. Пожалуйста, опубликуйте это как ответ.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Обычно это плохая практика изменения реквизитов внутри дочернего компонента. В этом случае вы можете создать две разные переменные и обновить другую, когда какая-то из них изменит ее значение (через события и реквизиты).
Таким образом, компонент greeting будет генерировать какое-то событие, которое вы поймаете внутри основного компонента и обновите основной компонент name
С другой стороны, основной компонент передаст свойство greeting, которое будет реагировать на изменения внутри основного компонента и будет обновлять переменную name внутри данных приветствия.
Если вы получаете больше таких случаев, подумайте об использовании векс.
Я думаю, что вы ищете .sync модификатор для событий в Vue.js 2.3.0+.
Пример реализации можно найти в моей статье здесь.
Если вы передаете ссылку, например объект, в качестве опоры, вы можете привязать свойство этого объекта как к своему родителю, так и к ребенку.
Vue.component('greeting', {
template: '<input type = "text" v-model = "name.value" />' ,
props: ['name']
});
const app = new Vue({
el: '#app',
data: {
name: { value: '' }
}
});<script src = "https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id = "app">
Child: <greeting v-bind:name = "name"></greeting>
<br><br><br>
Main: <input type = "text" v-model = "name.value" placeholder = "" />
</div>
Если вы передаете ссылку, например объект, в качестве опоры, вы можете привязать свойство этого объекта как к своему родителю, так и к ребенку.