Связь между компонентами с использованием $ emit и props в Vue.js

Опубликовано: 5 Декабря, 2021

Компоненты в Vue.js иногда должны обмениваться данными друг с другом, чтобы дать желаемый результат. Компоненты на веб-странице расположены в иерархическом порядке, как дерево. Самый простой способ взаимодействия и передачи данных между компонентами - это использование $ emit и props.

$ emit и props: в Vue.js мы используем $ emit для генерации пользовательских событий для нашего компонента. Это означает, что так же, как щелчок мышью или прокрутка генерирует события onclick и onwheel, мы можем генерировать события из наших компонентных методов и называть их в соответствии с нашим соглашением. Не только это, мы также можем передавать данные в качестве аргументов этому событию.

 this. $ emit ('setevent', someVariable);

Свойства используются для передачи данных компонентам в виде настраиваемых атрибутов. Реквизит добавляется к компонентам следующим образом -

 Vue.component ('exampleComponent', {
    реквизиты: ['sometext'],
    
    template: `<p> Это данные опоры - {{sometext}} </p>`

});

Как это работает?

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

Пример. В следующем примере показано, как работает этот механизм. Это очень простая веб-страница, которая показывает, сколько раз была нажата кнопка. Он имеет 3 компонента - родительский компонент и 2 дочерних компонента внутри него.

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < meta charset = "utf-8" >
    < meta name = "viewport" content =
        "width=device-width, initial-scale=1" >
 
    <!-- Including Vue using CDN-->
    < script src =
 " https://cdn.jsdelivr.net/npm/vue/dist/vue.js " >
    </ script >
 
    <!-- Javascript code -->
    < script src = "script.js" ></ script >
     
    < style >
        .component1 {
            display: block;
            background-color: green;
            height: 15em;
            text-align: center;
            color: white;
            padding-top: 5em;
        }
         
        .component2 {
            display: block;
            background-color: grey;
            height: 15em;
            text-align: center;
            padding-top: 5em;
        }
    </ style >
 </ head >
 
< body >
    < div id = "root" >
        < parentcomponent ></ parentcomponent >
    </ div >
 </ body >
 
</ html > 

Javascript

 /* First component has a heading element in
   the template which shows how many times
   the button in 2nd component has been
   clicked. It uses props. */
 Vue.component( 'component1' , {
    props: [ 'labeltext' ],
 
    // This props is then used in template
    // to have dynamic values.
    template: `<div class= "component1" >
    <h1>You have clicked {{labeltext}} times</h1>
    </div>`
 });
 
/* Second component has a button which when
 clicked upon executes the count method. A
 custom event namely 'setevent' is triggered
 by this method. */
 Vue.component( 'component2' , {
    data() {
        return {
            nclick: 0
        }
    },
    template: `<div class= "component2" >
        <button @click = "count" >Click</button>
        </div>`,
    methods: {
        count() {
            this .nclick += 1;
 
            // Emitting a custom-event
            this .$emit( 'setevent' , this .nclick);
        }
    }
 });
 
// This is just a div element component which
 // contains the two child components in it.
 Vue.component( 'parentcomponent' , {
    data() {
        return {
            text: 0
        }
    },
 
    // Set method is binded to the 'setevent'
    // event and labeltext is the prop.
    template: `<div>
        <component1 :labeltext = "text" ></component1>
        <component2 @setevent = "set" ></component2>
    </div>`,
    methods: {
        set(n) {
 
            // Updates the variable text which
            // is the value of prop attribute
            this .text = n;
        }
    }
 });
 
new Vue({
    el: '#root' ,
    data: { }
 })

Выход:

Приложения и область действия: компоненты в веб-приложении Vue.js расположены в иерархическом порядке со многими уровнями, такими как дерево с компонентами внутри компонентов. Используя вышеуказанный метод, можно связать несколько событий и подняться по этому дереву, а затем передать данные на более низкие уровни с помощью prop.

Следовательно, этот метод очень подходит, когда нам требуется взаимодействие компонентов на 2 или 3 уровнях, но как только наше веб-приложение требует взаимодействия между компонентами, которые находятся на очень разных уровнях, этот процесс становится все более сложным, как вы можете себе представить. Именно тогда в игру вступают библиотеки управления состоянием, такие как Vuex. Но для базовых взаимодействий мы используем $ emit и props, чтобы не бросать все мелочи в наш магазин Vuex.

JavaScript HTML HTML-Misc JavaScript-Misc

Связь между компонентами с использованием $ emit и props в Vue.js

HTML

Javascript

Выход:

РЕКОМЕНДУЕМЫЕ СТАТЬИ