Cómo crear un componente o código reusable en Vue

Vue.js es uno de los frameworks preferidos de los desarrolladores frontend. Según la definición dada en su sitio web oficial, Vue es un framework de estilo progresivo diseñado para crear interfaces de usuario. Una de las cosas principales que lo distingue de otros frameworks monolíticos es que fue diseñado para ser adoptado de forma incremental.

La estructura Single-Files Component de Vue es la responsable de separar los componentes en: HTML Markup, Behavior y Estulos. Uno de nuestros developers expertos en Vue explicó cómo esta estructura es diferente a la usada por otros frameworks similares como Angular y React.

“Se diferencia de Angular, por ejemplo, porque un componente existe dentro de un solo archivo y sus partes no están segregadas en varios archivos. Y las plantillas difieren de React porque están escritas declarativamente en un formato que es un superconjunto de HTML (es decir, todo HTML también es una plantilla Vue válida) y no necesariamente con JSX (aunque es posible usar JSX y otros motores de plantillas también)".

Crear componentes reusables en Vue

Aprenderemos a construir un componente reusable en Vue, que nos servirá para reusarlo en Create o Edit o en cualquier sitio que requiera del mismo código y de la misma funcionalidad. Reusar un componente o un código nos ayuda a evitar escribir el mismo código y funcionalidad en múltiples ocasiones.

Primero, crea el componente UserComponent.vue en el directorio de componentes y añade el siguiente código:

<template>
  <div class="max-w-lg mx-5 text-left">
    <form @submit.prevent="$emit('submit-form', form)">
      <div class="mb-6">
        <label for="name" class="text-sm font-medium text-gray-900 block mb-2"
          >Name</label
        >
        <input
          type="text"
          id="name"
          class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
          placeholder="Name"
          v-model="form.name"
          required=""
        />
      </div>
      <div class="mb-6">
        <label for="email" class="text-sm font-medium text-gray-900 block mb-2"
          >Your email</label
        >
        <input
          type="email"
          id="email"
          class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
          placeholder="Email"
          v-model="form.email"
          required=""
        />
      </div>
      <div class="mb-6">
        <label
          for="address"
          class="text-sm font-medium text-gray-900 block mb-2"
          >Address</label
        >
        <input
          type="text"
          id="address"
          class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
          placeholder="Address"
          v-model="form.address"
          required=""
        />
      </div>
      <div class="mb-6">
        <label for="text" class="text-sm font-medium text-gray-900 block mb-2"
          >Mobile no</label
        >
        <input
          type="text"
          id="mobile_no"
          class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
          placeholder="Mobile no"
          v-model="form.mobile"
          required=""
        />
      </div>

      <button
        type="submit"
        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
      >
        Submit
      </button>
    </form>
  </div>
</template>

<script>
export default {
  name: "UserComponent",
  props: {
    user: Object,
  },
  data() {
    return {
      form: {
        name: this.user ? this.user.name : "",
        address: this.user ? this.user.address : "",
        email: this.user ? this.user.email : "",
        mobile: this.user ? this.user.mobile : "",
      },
    };
  },
};
</script>

Luego, vamos a crear el componente CreateUser.vue. Después de crearlo, importa el UserComponent y agrégalo en el template como aparece en el siguiente código:

<template>
  <div class="px-5">
    <!-- success msg component -->
    <Success :msg="msg" v-show="success" />
    <UserComponent @submit-form="saveUser" />
  </div>
</template>

<script>
import UserComponent from "./UserComponent";
import Success from "./Success";

export default {
  name: "CreateUser",
  components: {
    UserComponent,
    Success,
  },
  data() {
    return {
      success: false,
      msg: "",
    };
  },
  methods: {
    saveUser() {
      this.success = true;
      this.msg = "User added";
      console.log("User info saved");
    },
  },
};
</script>

Lo mismo para el componente EditUser, agregando el siguiente código:

<template>
  <div class="px-5">
    <!-- success msg component -->
    <Success :msg="msg" v-show="success" />
    <!-- edit user which has user data as prop -->
    <UserComponent :user="user" @submit-form="updateUser" />
  </div>
</template>

<script>
import UserComponent from "./UserComponent";
import Success from "./Success";

export default {
  name: "EditUser",
  components: {
    UserComponent,
    Success,
  },
  props: {
    user: Object,
  },
  data() {
    return {
      success: false,
      msg: "",
    };
  },
  methods: {
    updateUser() {
      this.success = true;
      this.msg = "User Updated";
      console.log("User info updated");
    },
  },
};
</script>

Lo siguiente sería crear el componente Success, con el propósito de mostrar el mensaje de éxito luego de editar el usuario. Para crearlo en el directorio de componentes, agrega:

<template>
  <div
    class="w-full mx-4 text-green-300 p-2 mx-auto mb-6 bg-green-600 border border-green-700 rounded"
  >
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: "Success",
  props: {
    msg: {
      type: String,
    },
  },
};
</script>

Ya casi en el último paso. Agrega los componentes CreateUser y EditUser en el archivo App.vue:

<template>
  <div id="app">
    <h4>Save information of User</h4>
    <CreateUser />
    <br />
    <h4>Update User Information</h4>
    <EditUser :user="user" />
  </div>
</template>

<script>
import CreateUser from "./components/CreateUser";
import EditUser from "./components/EditUser";

export default {
  name: "App",
  components: {
    CreateUser,
    EditUser,
  },
  data() {
    return {
      user: {
        name: "Alex",
        address: "info building",
        email: "alex@xyz.com",
        mobile: "1122334456",
      },
    };
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Y de esta manera hemos logrado reusar el componente o código de manera exitosa en una aplicación Vue.

Nuestros developers expertos en Rootstack han utilizado esta técnica para dar solución a los problemas tecnológicos que presentan nuestros clientes a nivel internacional. Si quieres formar parte de este equipo, solo haz clic aquí y da el primer paso a un brillante futuro. 

Te recomendamos en video