有关vue的一个场景的最佳实践的问题

Question

我们都知道控制一个组件或页面元素显示或者隐藏，可以使用vue中的v-show绑定一个变量来实现
比如我们点击一个按钮，显示一个组件，再点击，会隐藏

页面部分
<input type="button" @click="toggleModal">
<test-modal v-show="showModal"></test-modal>

逻辑部分
....
data () {
  return {
    showModal: false
  }
},
methods: {
  togggleModal () {
    this.showModal = !this.showModal;
  }
}

现在的场景是，如果我们页面上需要有十个这样的button,对应十个modal，而且这些modal都不是单例的，即可以同时存在，那我们要引入10个变量，而且要绑定10个函数，这样当然是可以的，然而有没有更加简单的方式。
我得想法是，写一个自定义指令v-modal，绑在button上，如

<input type="button" v-modal:modal-1>

然后在v-modal指令的insert方法中绑定button的事件操作，操作相应的DOM,此时是modal-1。故相应的modal应该增加一个ref：

<test-modal ref="modal-1"></test-modal>

这样就少写了很多重复的逻辑语句

请问是否还有更好的办法？

---

看了一下各位的回答，首先非常感谢，但是我还是觉得用数组解决不是最优解，
准备自己尝试其他更简洁的方法

---

参考了下饿了么的前端组件库

Jsfiddle

1. html的写法很简洁，一个button对应一个modal，分别用binding.arg和ref连接起来， 很容易阅读

2. 指令部分可以单独放在一个文件内

3. 开关逻辑写在组件内部，且只需要写一次

Answer 1

10 个功能类似的按钮可以抽象成 10 条数据，然后进一步抽象成一个数组：

export default {
  data () {
    return {
      buttons: [
        { text: 'xxx', isModalOpen: false },
        { text: 'yyy', isModalOpen: false },
        // ...
      ]
    }
  },
  methods: {
    toggleModal (index) {
      this.buttons[i].isModalOpen = !this.buttons[i].isModalOpen
    }
  }
}

然后在模板中简单地复用 methods 与 data 数据。按钮分散在页面各处时，不需要 v-for，直接硬编码数组下标即可：

<button @click="toggleModal(0)">{{buttons[0].text}}</button>

Answer 2

直接写也不麻烦啊，循环遍历输出就好了，而且逻辑很清楚。https://jsfiddle.net/stardew/...

Answer 3

为什么不直接用个方法来控制元素?
然后直接按钮监听调用就完了啊.
感觉像是为了尝试vue的功能而写功能,而不是为了需求写功能.

Answer 4

如果不想用v-for循环其实我觉得可以用slot插槽，具体写法我写了一下，组件如下：

<template>
  <div>
    <button @click="changeModal">click</button>
    <div v-show="showModal">
      <slot></slot>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        showModal: false
      }
    },
    methods: {
      changeModal () {
        this.showModal = !this.showModal
      }
    }
  }
</script>

在其他组件里面的用法如下：

<modal>
  <test-modal></test-modal>
  <!-- test-modal为你想要控制的组件 -->
</modal>