Научете как управляван от събития модел може да ви помогне да предавате данни между компонентите.

Структурирането на вашите уеб приложения с помощта на компонентна архитектура улеснява изграждането и поддръжката на вашето приложение.

Излъчването на персонализирани събития е един от начините, по които можете да управлявате комуникацията между компонентите; подпорите и слотовете са други две. Персонализираните събития ви позволяват да изпращате данни от дъщерния към родителския компонент.

Излъчване на събития от дете към неговия родител

Vue предлага много опции за комуникация между компонентите. Един важен начин за комуникацията между компонентите е чрез подпори. Props ви позволяват да изпращате данни от родителски към дъщерни компоненти.

Какво се случва тогава, ако искате да изпратите данни от дъщерния към родителския компонент? Vue ви позволява да излъчвате персонализирани събития от дъщерни към родителски компоненти. Този процес позволява на родителския компонент да използва данни и функции от дъщерния компонент.

instagram viewer

Например, представете си компонент на бутон с функция, която връща стойност при всяко щракване. Ще трябва да излъчите това събитие към родителския компонент, за да позволите на родителския компонент да актуализира своето състояние или да извърши действие въз основа на върнатата стойност.

Конвенция за именуване на персонализирани излъчвани събития във Vue

Преди да се потопите в това как да излъчвате персонализирани събития, трябва да разберете конвенцията за именуване на персонализирани събития във Vue. Преди да се появи Vue 3, разработчиците стриктно трябваше да дефинират персонализирани събития с калъф за кебап, разделяне на думите в имената с тире.

Вече е стандартна практика да дефинирате вашите персонализирани събития в kebab-case, когато работите с HTML шаблони, и CamelCase при работа с JavaScript. Можете обаче да изберете да използвате всяка опция, когато работите с JavaScript, тъй като Vue компилира всички персонализирани събития обратно в kebab-case.

Когато излъчвате персонализирано събитие, предайте целта на събитието с описателно име. Това е много важно, особено когато работите в екип, за да стане ясна целта на събитието.

Как да излъчите персонализирани събития от дъщерен към родителски компонент

Има два начина, по които можете да постигнете излъчване на персонализирани събития във Vue. Можете да излъчвате персонализирани събития в линия (директно в шаблона Vue) с $излъчвам метод, който Vue предоставя. Можете също така да използвате defineEmits макрос, достъпен от Vue 3.

Излъчване на персонализирани събития във Vue с метода $emit

$излъчвам, вграден метод на Vue, позволява на дъщерен компонент да изпрати събитие до своя родителски компонент. Извиквате този метод на линия (в шаблона на дъщерния компонент), за да задействате персонализираното събитие. Методът $emit приема два аргумента: името на събитието, което искате да излъчите, и незадължителен полезен товар, който може да носи допълнителни данни.

Помислете за този дъщерен компонент, който излъчва събитие, за да уведоми родителския компонент за щракване на бутон:

 ChildComponent.vue 
<сценарийнастройвам>
импортиране { ref } от 'vue';
const post = ref('')
сценарий>
<шаблон>
<див>
<входТип="текст"v-модел="пост">
<бутонv-on: щракване="$emit('button-clicked', post)">Публикувайбутон>
див>
шаблон>

Този кодов блок показва как да излъчите персонализирано събитие от дъщерен компонент. Детето започва с инициализиране на пост променлива с празен низ.

След това дъщерният компонент свързва входния елемент към променливата post с v-model, a Директива за обвързване на данни на Vue. Това обвързване позволява промените, които правите в полето за въвеждане, за да актуализирате автоматично променливата за публикация.

Елементът бутон има директива v-on, която следи за събития с щракване върху бутона. Щракването върху бутона извиква метода $emit с два аргумента: името на събитието, „щракнат върху бутон“ и стойността на променливата post.

Родителският компонент вече може да слуша персонализираното събитие с директивата v-on for обработка на събития във Vue:

 ParentComponent.vue 
импортиране { ref } от "vue";
импортиране на ChildComponent от "./components/ChildComponent.vue";
const postList = ref([])


const addPosts = (публикация) => {
 postList.value.push (публикуване)
}
сценарий>
<шаблон>
<див>
<ChildComponent @натиснат бутон="добавяне на публикации"/>
<ул>
<лиv-за="публикуване в postList">{{ публикация }}ли>
ул>
див>
шаблон>

Този кодов блок демонстрира родителски компонент, който импортира и използва дъщерния компонент от преди. Родителският компонент дефинира a postList променлива масив като реактивна препратка. След това компонентът дефинира an addPosts функция, която се изпълнява, като a пост аргумент. Функцията добавя нова публикация към масива postList с натиснете () метод.

The @button-щракнат слушател на събития улавя персонализираното събитие the ChildComponent излъчва, когато щракнете върху бутона. Това събитие кара функцията addPosts да се изпълнява. Накрая кодовият блок прикрепя v-за директива за изобразяване на списъци във Vue към елемента ul, за да премине през масива postList.

Излъчване на събития с макроса defineEmits

Vue 3 представи defineEmits макрос, който изрично дефинира събитията, които даден компонент може да излъчва. Този макрос предоставя безопасен за типа начин за излъчване на събития, водещи до по-структурирана кодова база.

Ето пример за това как можете да използвате макроса defineEmits и да го извикате във вашия дъщерен компонент:

 ChildComponent.vue 
<сценарийнастройвам>
импортиране { ref } от "vue";
const emit = defineEmits(["щракнат бутон"]);


const post = ref("");


const buttonClick = () => {
 emit("щракнат бутон", post.value);
};
сценарий>
<шаблон>
<див>
<входТип="текст"v-модел="пост" />
<бутонv-on: щракване="buttonClick">Публикувайбутон>
див>
шаблон>

Въпреки че функционалността остава същата, има значителни разлики в синтаксиса на кода между горния кодов блок и този с $излъчвам функция.

В този кодов блок, defineEmits макросът определя натиснат бутон събитие. Чрез извикване на този макрос кодовият блок връща функция $emit, която ви позволява да излъчвате дефинираните събития. Масивът, предаден на макроса defineEmits в компонента, ще съдържа всички събития, които трябва да излъчите към родителския компонент.

След това кодовият блок дефинира a бутонЩракнете функция. Тази функция излъчва събитието с натискане на бутон и променливата post към родителския компонент. Шаблонният блок на дъщерния компонент съдържа елемент бутон.

Елементът бутон има a v-on: щракване директива, задействаща функцията buttonClick. След това родителският компонент може да използва дъщерния компонент по същия начин, както го направи с метода $emit.

Разработчиците на Vue се възползват от базирана на компоненти архитектура

Можете да комуникирате от дъщерен компонент към неговия родител, като излъчвате събития, като използвате метода $emit и макроса defineEmits.

Можете да се възползвате от базираната на компоненти архитектура на Vue, тъй като ви позволява да пишете по-структуриран, стегнат код. С модерни рамки на JavaScript като Vue можете да използвате уеб компоненти, уеб стандарт на W3C, за да постигнете тази базирана на компоненти архитектура.