javascript - Vue.js 方法简写

Question

我想知道是否可以简化这个问题？
我有一堆名为 Btn 的按钮组件，如下所示:

<Btn content="7" @click="addSymbol(content)" />
<Btn content="8" @click="addSymbol(content)" />
<Btn content="9" @click="addSymbol(content)" />
<Btn content="/" @click="addSymbol(content)" />

我需要使用相应的内容属性触发 addSymbol 方法，并且可能，如果我可以简化它，以便我不必在每个组件上声明它？

Answer 1

您可以对数组中的内容进行分组并使用 v-for创建组件。要获取每一个的内容，可以emit prop如下:

const btn = Vue.component('btn', {
  template: '#btn',
  props: ['content'],
  methods: {
    clicked() {
      this.$emit('click', this.content);
    }
  }
});

new Vue({
  el:"#app",
  components: { btn },
  data: () => ({ contents: ['7','8','9','/'] }),
  methods: {
    addSymbol(content) { 
      console.log(content);
    }
  }
});

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

<template id="btn">
  <button @click="clicked">CLICK {{content}}</button>
</template>

<div id="app">
  <btn 
    v-for="(content, index) in contents" 
    :key="index"
    :content="content"
    @click="addSymbol" 
  />
</div>