Vue.component('test', {
template:
'<div>
<input :value="width" type="text">
<input :value="height" type="text">
</div>',
data: function(){
return{
width:0,
height:0
}
},
methods: {
setWidth(v) {
this.width = v
},
setHeight(v) {
this.height = v
}
}
})
<input type="text" @input="$refs.test.setWidth($event.target.value)">
<input type="text" @input="$refs.test.setHeight($event.target.value)">
<test ref="test"></test>
Vue.component('test', {
template:
'<div>
<input :value="width" type="text" @input="setWidth">
<input :value="height" type="text" @input="setHeight">
</div>',
data: function(){
return{
width:0,
height:0
}
},
methods: {
setWidth(e) {
this.width = e.target.value
this.$emit('onWidth', this.width)
},
setHeight(e) {
this.height = e.target.value
this.$emit('onHeight', this.height)
}
}
})
<app>
<navigation @click="show=!show"/>
<sidebar :show="show"/>
</app>
<template> <! -- navigation template-->
<div>
<button @click="$emit('click')">
</div>
</template>
:key="`${Math.random(100000000)}`"
чтобы ключи рандомные генерировались. А так да, при таком количестве элементов процедура сверки всего виртуалдом дерева отнимает время. Нужно наверное придумывать решение при котором в виртуал доме будет как можно меньшее кол-во элементов или писать свой рендерер, заточенный под вашу задачу.