如何在Nuxtjs或vuejs中创建可重用/全局按钮组件

Question

我们都来过这里。好的代码避免重复。如果在多个文件中重复相同的代码，那么将其作为一个组件如何？使用您自己的阈值/判断来衡量代码是否真的需要成为一个组件。

我该怎么做？

Answer 1

我将带您了解如何在NuxtJs中创建Global(可在应用程序范围内使用的组件(按钮组件，但也可以应用于Vue.js.

首先在组件目录中创建组件文件，在我的例子中是PrimaryButton.vue。我的PrimaryButton组件中的代码看起来像这个

<template>
<button class="rounded-button-cyan subheading4" @click="callback($event)">
{{ buttonText }}
</button>
</template>
<script>
export default {
props: {
buttonText: String,
},
methods: {
callback: function (e) {
this.$emit("click", e);
},
},
};
</script>

在上面的代码片段中，我们创建了一个全局PrimarButton，它可以接收一个道具buttonText和一个点击事件。

现在让我们使用它。我们现在可以在任何文件中使用按钮，如。。。

<template>
<PrimaryButton  @click="showAlert()" buttonText="Show Alert" />
</template>
<script>
export default {
methods: {
showAlert() {
alert("EARTH HACKED 💪💪💪💪");
},
},
};
</script>