javascript - 将事件绑定(bind)到多个对象

Question

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

根据下面的代码片段，如果您单击按钮，两个按钮的事件将同时触发。我想知道是否可以仅针对单击的按钮触发事件，而无需为 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>

Answer 1

考虑将通用代码移至 component与 slots减少重复代码并隔离数据属性:

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>