javascript - Vue 应该只触发被点击的元素

Question

我正在进行我的第一个 Vue 项目。我有一张带有单元格的 table 。当我双击一个单元格时，我想用 updated 或类似的内容触发该单元格中的子组件。

到目前为止，我一直通过向其发送 Prop 来做到这一点。有用。问题是，当我双击一个单元格时，所有子组件中都会触发 updated 。它可以被触发100或1000次，只是为了“激活”单个细胞。

屏幕截图

代码和问题

下面的代码与我的项目相去甚远，但仍然会显示问题。单击一个按钮，所有单元格都会对其使用react，而不仅仅是被单击的单元格。

我确实明白为什么会发生这种情况。在我的子组件中，我输出已被父组件更改的数据。然后所有子组件都会对其使用react。但是，没有必要在它们不活动时触发它们。

如何触发我点击的项目的更新？

Vue.component('v-child', {
  props: ['item', 'active'],
  updated() {
    console.log('Clicked');
  },
  template: `
  <div>
      {{ item }} {{ active }}
  </div>`
  });

new Vue({
  el: '#app',
  data: {
    active: 0,
  	items: {
    	first: '1',
      second: '2',
      third: '3',
      a: 'a',
      b: 'b',
      c: 'c'
    },
    message: 'Hello Vue.js!'
  },
  methods: {
  	click(item) {
      this.active = item;
      console.log(this.active);
    }
  }
});

li {
  list-style: none;
  margin-bottom: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <li v-for="item in items">
      <button v-on:click="click(item)">Button</button>
      <v-child :item="item" :active="active"></v-child>
    </li>
  </div>

Answer 1

updated 会为每个子项调用，因为 active 已更改，因此每个子项都需要渲染。

有两种方法可以实现您想要的:

• 使active仅针对事件项目进行更改
• 保留您的代码并添加一些验证以检查子级是否处于事件状态(Steven Spungin 解决方案)

解决方案 #1 的示例

Vue.component('v-child', {
  props: ['item', 'active'],
  updated() {
    console.log('Clicked');
  },
  template: `
  <div>
      {{ item.value }} {{ item.count }}
  </div>`
});

new Vue({
  el: '#app',
  data: {
    active: 0,
    items: {
      first: {value:'1', count:0},
      second: {value:'2', count:0},
      third: {value:'3', count:0},
      a: {value:'a', count:0},
      b: {value:'b', count:0},
      c: {value:'c', count:0}
    },
    message: 'Hello Vue.js!'
  },
  methods: {
    click(item) {
      item.count++;
    }
  }
});

li {
  list-style: none;
  margin-bottom: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <li v-for="item in items">
    <button v-on:click="click(item)">Button</button>
    <v-child :item="item" :active="active"></v-child>
  </li>
</div>