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

這個答案假設您不能出於某種原因只對<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
}

Answer 2

您可以對數組中的內容進行分組並使用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>