求助:Vue更新数据以后,兄弟组件全部执行update
发布于 3 年前 作者 huaer 1077 次浏览 来自 问答
粉丝福利 : 关注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>
回到顶部