Бесшовные составляющие Vue

У нас все имело место, где нам нужно было повторно использовать много HTML-кода. Может быть, форма, содержащая несколько входных данных со своей этикеткой. Вот почему мы бы создадим компонент для этого.

import Vue from "https://unpkg.com/vue/dist/vue.esm.browser.js";

const InputLabel = {
    template: `
        
            
                
            
            
        
    `
};

new Vue({
    el: "#vue",
    components: {
        InputLabel
    },
    template: `
        First Name
    `
});

Но что, если вам нужно послушать ввод клавиши на входе? Естественно, мы хотели бы добавить событие на компонент, который мы добавили.

import Vue from "https://unpkg.com/vue/dist/vue.esm.browser.js";

const InputLabel = {
    template: `
        
            
                
            
            
        
    `
};

new Vue({
    el: "#vue",
    components: {
        InputLabel
    },
    template: `
        First Name
    `,
    methods: {
        keydownEnterHandler() {
            alert("enter key pressed!");
        }
    }
});

Aaaaaaaand … Это не будет работать. Поскольку вам необходимо прикрепить событие KeyDown к шаблону компонента, а не сам компонент. Итак, для этого вы можете использовать родной модификатор.

import Vue from "https://unpkg.com/vue/dist/vue.esm.browser.js";

const InputLabel = {
    template: `
        
            
                
            
            
        
    `
};

new Vue({
    el: "#vue",
    components: {
        InputLabel
    },
    template: `
        First Name
    `,
    methods: {
        keydownEnterHandler() {
            alert("enter key pressed!");
        }
    }
});

И … успех! Теперь это работает как ожидалось. Но что, если мы хотим добавить некоторые пользовательские атрибуты нашему входу? Это было бы здорово, если родной Модификатор будет работать как события, верно?

import Vue from "https://unpkg.com/vue/dist/vue.esm.browser.js";

const InputLabel = {
    template: `
        
            
                
            
            
        
    `
};

new Vue({
    el: "#vue",
    components: {
        InputLabel
    },
    template: `
        
            First Name
        
    `,
    methods: {
        keydownEnterHandler() {
            alert("enter key pressed!");
        }
    }
});

К сожалению, это не будет. В конце концов, мы хотели бы не вынуждены добавить этого родной Каждый раз, когда мы хотим использовать наши события, так как у нас вообще нет пользовательских событий. Есть решение для того, чтобы мои друзья на самом деле два решения.

$ Слушатели и $ attrs

В каждом компонентах Vue.js у нас есть доступ к двум специальным переменным, которые являются $ слушатели & $ attrs Отказ

$ слушатели будет содержать все события, которые прикреплены к компонентам, которые обычно используются. Например, пользовательские события, такие как @tingychanged . Тогда как $ attrs будет содержать все пользовательские атрибуты, которые компоненты получат как Маленькая колонна Отказ

Давайте посмотрим, как использовать их в нашем компоненте.

import Vue from "https://unpkg.com/vue/dist/vue.esm.browser.js";

const InputLabel = {
    template: `
        
            
                
            
            
        
    `
};

new Vue({
    el: "#vue",
    components: {
        InputLabel
    },
    template: `
        
            First Name
        
    `,
    methods: {
        keydownEnterHandler() {
            alert("enter key pressed!");
        }
    }
});

Вот и все! Нам не нужно добавлять родной Модификатор больше к нашим событиям они будут работать без проблем. Это означает, что все будущие атрибуты и слушатели будут связаны с элемент.

Это также означает, что наше ценность Атрибут, который в любом случае не работал раньше, теперь делает. Благодаря этим магическим ключевым словам.

Как вы можете заметить, я использовал странный альтернативный синтаксис к классическому V-на: что-то = "что-то" синтаксис. На самом деле, вы можете использовать V-на без каких-либо аргументов. Это получит объект, содержащий ваши желаемые события. На самом деле, V-ON: нажмите = "что-то" просто синтаксический сахар для V-on = "{click: что-то}" Отказ То же самое касается V-bind Отказ

Стоит также упомянуть, что @ yclick эквивалентно V-на: нажмите Отказ

Теперь вы можете насладиться написанием маленьких атомных компонентов, которые будут реагировать о том, как вы ожидаете, что они сделают в ваших приложениях.

Почему мне нужно сделать это?

Компоненты должны быть простыми и безмятежными. Если бы мы хотели на самом деле использовать наш ценность атрибут, мы должны были бы определить реквизит в этом отношении. Представьте себе, что делает это на пятнадцать или больше атрибутов и событий. Это решение не масштабируется. Но используя $ слушатели & $ attrs Масштаб, много.

Дайте мне знать, какой рефакторинг компонентов вы намереваетесь сделать, мы можем обсудить их в разделе комментариев. Не стесняйтесь спрашивать меня, если вы все еще изо всех сил пытаетесь понять некоторую часть этой статьи, я буду рад помочь вам понять это.

Спасибо за чтение и увидимся в следующий раз!

Оригинал: “https://dev.to/aminnairi/seamless-vue-components-2boe”