将事件绑定到多个对象答案

【问题标题】：Bind event to multiple objects将事件绑定到多个对象
【发布时间】：2021-02-23 06:29:06
【问题描述】：

我正在尝试将相同的行为附加到几个不同的元素，但无法弄清楚如何。

鉴于下面的 sn-p 代码，如果您要单击按钮，两个按钮的事件会同时触发。我想知道是否有可能只为单击的按钮触发事件，而无需为button1 和showInside1 等创建方法。

var App = new Vue({
  el: '#app',
  data() {
    return {
        showInside: false
    }
  },
  methods:{
    show: function () {
        this.showInside = true 
    },
    hide: function () { 
        console.log('hide')
        this.showInside = false
    }
  },
  events: {
    closeEvent: function () {
      console.log('close event called')
      this.hide()
    }
  }
})

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

<div id="app">
  <button @click.stop="show">1 Click me</button>
  <div v-if="showInside">
    <p>This is box 1</p>  
    <button @click="hide">Close</button>
  </div>


  <button @click.stop="show">2 Click me</button>
  <div v-if="showInside">
    <p>This is box 2</p>  
    <button @click="hide">Close</button>
  </div>
</div>

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

考虑将公共代码移动到带有slots 的component 以减少重复代码并隔离数据属性：

Vue.component('my-section', {
  template: `
    <div class="my-section">
      <button @click.stop="showInside = true">Click me</button>
      <div v-if="showInside">
        <slot></slot>
        <button @click="showInside = false">Close</button>
      </div>
    </div>`,
  data() {
    return {
        showInside: false
    }
  },
  methods:{
    show: function () {
        this.showInside = true 
    },
    hide: function () { 
        console.log('hide')
        this.showInside = false
    }
  },
  events: {
    closeEvent: function () {
      console.log('close event called')
      this.hide()
    }
  }
})

var App = new Vue({
  el: '#app',
})

.my-section {
  margin: 1em;
  padding: 0.5em;
  border: solid 1px #ccc;
}

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

<div id="app">
  <my-section>
    <p>This is box 1</p>
  </my-section>
  <my-section>
    <p>This is box 2</p>
  </my-section>
</div>

【讨论】：

【解决方案2】：

虽然showInside 是布尔值，但这是不可能的。你应该保持每个盒子的状态：

data() {
    return {
        show: {
          panel1: false,
          panel2: false,
        }
    }
  },

然后：

<div id="app">
  <button @click.stop="show.panel1 = true">1 Click me</button>
  <div v-if="show.panel1">
    <p>This is box 1</p>  
    <button @click="show.panel1 = false">Close</button>
  </div>


  <button @click.stop="show.panel2 = true">2 Click me</button>
  <div v-if="show.panel2">
    <p>This is box 2</p>  
    <button @click="show.panel2 = false">Close</button>
  </div>
</div>

当然你可以使用数组和v-for 来处理动态情况

【讨论】：