使用 Nuxtjs/vuejs 创建 Reusable/Global 按钮组件

Question

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

我该怎么做？

Answer 1

那么今天是你的幸运日，因为，我将带你了解如何在 NuxtJs 中创建一个全局（可以使用 app-wide 的组件）按钮组件，但也可以申请 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>

这就是程序员！！快乐的 NUXTING

使用 Nuxtjs/vuejs 创建 Reusable/Global 按钮组件

Create Reusable/Global Button Component with Nuxtjs/vuejs

vue.js

nuxt.js