Vue.js
求助：Vue更新数据以后，兄弟组件全部执行update
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利
任何一个输入框输入字符以后，当前组件里面所有的el-tab-pane都会执行里面的updated方法。造成页面卡顿。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title>vue test</title>
</head>
<body>
<div id="app">
<input-pop
:pop-data="arr1"
v-model="value1">
</input-pop>
<input-pop
:pop-data="arr2"
v-model="value2">
</input-pop>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/x-template" id="modal-template">
<el-popover
placement="bottom-start"
title
width="540"
trigger="click"
v-model="visible"
class="input-pop"
>
<el-tabs
v-model="activeName"
type="card"
>
<el-tab-pane
v-for="(item, index) in popData"
:key="index"
:label="item.title"
:name="index + ''"
>
<div class="tab-content">
<el-button
v-for="(vItem, vIndex) in item.vals"
:key="vIndex"
class="select-item" size="mini"
@click="select(vItem)"
>{{vItem}}</el-button>
</div>
</el-tab-pane>
</el-tabs>
<el-input
slot="reference"
size="mini"
ref="input"
v-model="inputValue"
clearable
v-bind="$attrs"
v-on="$listeners"
@clear="clearInput"
>
</el-input>
</el-popover>
</script>
<script>
Vue.component('inputPop', {
template: '#modal-template',
props: {
value: {
type: [String, Number],
default: ''
},
popData:{
type: Array,
default: () => []
},
},
data: function () {
return {
activeName: '0',
visible: false,
}
},
computed:{
inputValue:{
get(){
return this.value
},
set(value){
this.$emit('update', value)
}
}
},
model: {
prop: 'value',
event: 'update'
},
methods:{
select(item){
this.$emit('update', item)
this.visible = false
},
clearInput(){
this.$refs.input.focus()
}
}
})
// start app
new Vue({
el: '#app',
data: {
value1: '',
value2: '',
arr1: [
{
title: 'aa',
vals: ['ccc', 'bbb']
},
{
title: 'bb',
vals: ['fege', 'gegearfe']
},
{
title: 'cc',
vals: ['ccc', 'bbb']
},
{
title: 'dd',
vals: ['fege', 'gegearfe']
}
],
arr2: [
{
title: 'pop2',
vals: ['geiweire', 'test']
},
{
title: 'pop3',
vals: ['ckz', 'ieig', 'ieigk']
},
{
title: 'pop4',
vals: ['geiweire', 'test']
},
{
title: 'pop5',
vals: ['ckz', 'ieig', 'ieigk']
}
]
}
})
</script>
</html>