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方法，如果可能的话，我能否简化它，使得不必在每个组件上都声明？

- Daniel Nýdrle

---

参数content从哪里来的？ - Ohgodwhy

content 参数来自 Btn 组件本身，正如您所看到的。如果我点击 <Btn content="7" @click="addSymbol(content)" />，我想要触发 addSymbol("7")。 - Daniel Nýdrle

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>

- Majed Badawi

Answer 2

假设出于某种原因，您无法在 <Btn> 组件上直接使用 v-for。如果是这样的话，那么像下面这样将它们包装在一个 div 中，我们可以使用事件冒泡：

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

然后在addSymbol中，您将像这样获取元素：

addSymbol(el) {
 const content = el.currentTarget.getAttribute('content');
 // Do stuff
}

- maxshuty