Directivas personalizadas de Vue.js con componentes

Vue.js es un marco javascript progresivo para desarrollar interfaces de usuario web. Es un marco eficaz, accesible y versátil. Podemos crear aplicaciones de una sola página, así como aplicaciones de pila completa. Está construido sobre HTML, CSS y Javascript, lo que facilita a los desarrolladores la integración de Vue.js en cualquier aplicación en cualquier etapa.

Las directivas personalizadas permiten a los desarrolladores crear y usar algunas funciones personalizadas fácilmente en los elementos. Al igual que las directivas integradas que son como v-model, v-for, v-if, etc., podemos crear nuestras propias directivas según lo que establezcamos. Permite reutilizar algo de lógica al tener acceso al nivel inferior de DOM. También podemos pasar datos a las directivas personalizadas.

Directivas personalizadas con componentes: las directivas personalizadas se pueden usar con los componentes modificando, eliminando o agregando cualquier contenido al elemento. Las Directrices Personalizadas siempre serán aplicables al Node raíz del componente. Podemos tener un elemento de entrada que debería tener algún texto de marcador de posición predeterminado o algún valor predeterminado.

Sintaxis: En el componente, antes del nombre de la directiva agregue la “v-” de la siguiente manera:

<script>
const customDirective = {
  ...
};
export default {
  directives: {
    customDirective,
  },
};
</script>
<template>
  ...
  <MyElement v-customDirective />
</template>

Ejemplo: En el siguiente ejemplo, tenemos una directiva personalizada llamada entrada para los elementos de entrada para colocar fácilmente el color y el texto de marcador de posición en los elementos de entrada.

Paso 1: Cree un nuevo proyecto Vue.js con el administrador de paquetes npm node.js usando el siguiente comando.

npm init vue@latest

Ingrese el nombre del proyecto y preestablezca el proyecto de la siguiente manera:

 

Estructura del proyecto: después de una instalación exitosa, se formará la siguiente estructura del proyecto.

Estructura del proyecto

Paso 3: en la sección de script del archivo App.vue, cree una directiva personalizada y asígnele el nombre de entrada. En la sección montada, agregue el elemento y el enlace, a través del cual recibiremos valor de los elementos. Luego modifique el valor del elemento en consecuencia.

<script>
const input = {
  mounted: (el, binding) => {
    console.log(binding.value);
    el.placeholder = binding.value.placeholder;
    el.style.color = binding.value.color;
  },
};
export default {
  directives: {
    input,
  },
};
</script>

Paso 4: en la sección de plantilla del archivo App.vue, agregue dos elementos de entrada y agregue los valores para el marcador de posición y el color.

<template>
  <center>
    <h1 style="text-align: center;
        color: green">GeeksforGeeks</h1>
    <strong>
        Vue.js Custom Directives with Components
       </strong>
    <br />
  </center>
  <center>
    <input type="text"
             v-input="{ placeholder: 'Green Color Input', 
                         color: 'green' }"  />
    <input type="text"
             v-input="{ placeholder: 'Red Color Input', 
                         color: 'red' }"/>
  </center>
</template>

Paso 5: Ejecute el proyecto usando el siguiente comando y vea el resultado.

npm run dev

Salida: al compilar correctamente el proyecto, abra http://localhost:3000 y el resultado será el siguiente.

 

Referencia: https://vuejs.org/guide/reusability/custom-directives.html#usage-on-components