Vue.js 方法简写答案

【问题标题】：Vue.js methods shorthandVue.js 方法简写
【发布时间】：2021-03-03 18:05:34
【问题描述】：

我想知道是否可以简化这个问题？

我有一堆像这样命名为 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 方法，如果我可以简化它以便不必在每个单独的组件上声明它？

【问题讨论】：

参数content从何而来？
内容参数来自 Btn 组件本身，如您所见。如果我点击，我希望 addSymbol("7") 被触发。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您可以将内容分组到一个数组中，并使用v-for 创建组件。要获取每个内容，可以emitprop如下：

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>

【讨论】：

【解决方案2】：

此答案假定您不能出于某种原因仅在 <Btn> 组件上执行 v-for。如果是这样，那么像这样将它们包装在div 中，我们可以使用event bubbling：

<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
}

【讨论】：