Я пытаюсь синхронизировать опору между родителем и дочерним элементом в vue.js.
У меня есть родительский компонент, который включает дочерний компонент с поддержкой. Когда prop изменяется в родительском, prop обновляется в дочернем элементе, и когда prop изменяет в ребёнке, родитель обновляется.
Я начал с этого примера:
Html, где мой компонент установлен
<div>
<div id="app">
</div>
</div>
И родитель + ребенок:
Vue.component('myinput', {
template: '<div><input v-model="mytext" /></div>',
props: ['text'],
data() {
return {
mytext: this.text
}
}
})
const vm = new Vue({
el: '#app',
template: '<div> <myinput :text="mytext"></myinput> <p> {{mytext}} </p></div>',
data() {
return {
mytext: "Hello World!"
}
}
});
Поскольку я не могу мутировать реквизит, мне нужна локальная копия [Example Codepen].
Если я хочу, чтобы мой родительский компонент обновлялся, когда ребенок менялся, мне нужно, чтобы $emit
значение.
Для этого я создал обертку вокруг mytext
в дочернем компоненте:
computed: {
wrapperMyText: {
get() {
return this.mytext;
},
set(v) {
this.mytext = v;
this.$emit('update:text', v);
}
}
Я использую wrapperMyText в модели. [Пример кодепа]
Теперь, если я хочу привязать другой путь (от родителя к ребенку), мне нужно добавить наблюдателя в дочерний элемент.
watch: {
text(v) {
this.mytext = v;
}
},
В этом примере есть только одна опора, мне нужно создать наблюдателя и вычисленное свойство. Если у меня есть 5 свойств, мне понадобятся 5 наблюдателей и 5 вычисленных свойств. Это означает, что код компонента загрязнен (слишком много кода) со всем этим. Поэтому мои вопросы:
Является ли это стандартным шаблоном для синхронизации опоры?
В этом случае лучше использовать Store (например, vuex)?
Почему так много кода необходимо сделать для простого случая?
После отражения кажется, что я пытаюсь переделать v-модель со свойствами.
Одно вычисляемое свойство выполнит все, что вы пытаетесь сделать.
Vue.component('myinput', {
template: '<div><input v-model="wrapperMyText"></div>',
props: ['text'],
computed: {
wrapperMyText: {
get() { return this.text;},
set(v) { this.$emit('update:text', v);}
}
}
})
Вот ваша обновленная ручка.
Поэтому, чтобы ответить на ваши вопросы: