نحوه انتشار رویدادها برای برقراری ارتباط بین اجزای Vue

بیاموزید که چگونه یک مدل رویداد محور می تواند به شما کمک کند داده ها را بین مؤلفه ها منتقل کنید.

ساختار برنامه های وب خود با استفاده از معماری کامپوننت، ساخت و نگهداری برنامه شما را آسان می کند.

انتشار رویدادهای سفارشی یکی از راه هایی است که می توانید ارتباط بین اجزا را مدیریت کنید. لوازم و اسلات دو مورد دیگر هستند. رویدادهای سفارشی به شما امکان می‌دهند داده‌هایی را از فرزند به مؤلفه والد ارسال کنید.

وقایع را از یک کودک به والدینش منتقل می کند

Vue گزینه های زیادی برای برقراری ارتباط بین اجزا ارائه می دهد. یکی از راه های مهم ارتباط بین اجزاء از طریق props است. Props به شما امکان می دهد داده ها را از والدین به مؤلفه های فرزند ارسال کنید.

اگر بخواهید داده ها را از فرزند به مؤلفه والد ارسال کنید، چه اتفاقی می افتد؟ Vue به شما امکان می دهد رویدادهای سفارشی را از مؤلفه های فرزند به والد منتشر کنید. این فرآیند مؤلفه والد را قادر می سازد از داده ها و توابع از مؤلفه فرزند استفاده کند.

به عنوان مثال، یک جزء دکمه را با یک تابع تصور کنید که با هر کلیک یک مقدار را برمی گرداند. شما باید آن رویداد را به مؤلفه والد ارسال کنید تا مؤلفه والد بتواند وضعیت خود را به روز کند یا عملی را بر اساس مقدار بازگشتی انجام دهد.

کنوانسیون نامگذاری رویدادهای سفارشی منتشر شده در Vue

قبل از بررسی نحوه انتشار رویدادهای سفارشی، باید قرارداد نامگذاری رویدادهای سفارشی در Vue را بدانید. قبل از ظهور Vue 3، توسعه‌دهندگان مجبور بودند رویدادهای سفارشی را با حروف کباب تعریف کنند و کلمات را در نام‌ها با کاراکتر خط فاصله از هم جدا کنند.

در حال حاضر تمرین استاندارد است که رویدادهای سفارشی خود را در کباب کیس هنگام کار با قالب‌های HTML و camelCase هنگام کار با جاوا اسکریپت تعریف کنید. با این حال، می‌توانید هنگام کار با جاوا اسکریپت از هر گزینه‌ای استفاده کنید، زیرا Vue همه رویدادهای سفارشی را به کیس کباب کامپایل می‌کند.

هنگامی که یک رویداد سفارشی را منتشر می کنید، هدف رویداد را با یک نام توصیفی منتقل کنید. این بسیار مهم است، به خصوص زمانی که در یک تیم کار می کنید، تا هدف رویداد را روشن کنید.

نحوه انتشار رویدادهای سفارشی از فرزند به مؤلفه والدین

دو راه وجود دارد که می توانید رویدادهای سفارشی را در Vue انجام دهید. شما می توانید رویدادهای سفارشی را به صورت درون خطی (مستقیم در قالب Vue) با روش $emit که Vue ارائه می دهد منتشر کنید. همچنین می توانید از ماکرو defineEmits که از Vue 3 موجود است استفاده کنید.

انتشار رویدادهای سفارشی در Vue با روش $emit

$emit، یک متد Vue داخلی، به یک جزء فرزند اجازه می‌دهد تا یک رویداد را به مؤلفه والد خود ارسال کند. شما این روش را به صورت درون خطی (در قالب مولفه فرزند) فراخوانی می کنید تا رویداد سفارشی را راه اندازی کنید. متد $emit دو آرگومان می گیرد: نام رویدادی که می خواهید منتشر کنید و یک بار اختیاری که می تواند داده های اضافی را حمل کند.

این مؤلفه فرزند را در نظر بگیرید که رویدادی را منتشر می کند تا مؤلفه والد را در مورد کلیک یک دکمه مطلع کند:

<!-- ChildComponent.vue -->
<script setup>
import { ref } from 'vue';

const post = ref('')
</script>

<template>
    <div>
        <input type="text" v-model="post">
        <button v-on:click="$emit('button-clicked', post)">Post</button>
    </div>
</template>

این بلوک کد نحوه انتشار یک رویداد سفارشی از یک جزء فرزند را نشان می دهد. فرزند با مقداردهی اولیه یک متغیر پست با یک رشته خالی شروع می کند.

سپس مؤلفه فرزند، عنصر ورودی را به متغیر post با v-model، یک دستورالعمل اتصال داده Vue، متصل می کند. این اتصال به تغییراتی که در فیلد ورودی ایجاد می‌کنید اجازه می‌دهد تا متغیر پست به‌طور خودکار به‌روزرسانی شود.

عنصر دکمه دارای دستور v-on است که به رویدادهای کلیک روی دکمه گوش می دهد. کلیک روی دکمه، متد $emit را با دو آرگومان فراخوانی می‌کند: نام رویداد، “button-clicked” و مقدار متغیر post.

مؤلفه والد اکنون می تواند با دستور v-on برای مدیریت رویدادها در Vue به رویداد سفارشی گوش دهد:

<!-- ParentComponent.vue -->
import { ref } from "vue";
import ChildComponent from "./components/ChildComponent.vue";

const postList = ref([])

const addPosts = (post) => {
  postList.value.push(post)
}
</script>

<template>
  <div>
    <ChildComponent @button-clicked="addPosts"/>
    <ul>
      <li v-for="post in postList">{{ post }}</li>
    </ul>
  </div>
</template>

این بلوک کد یک مؤلفه والد را نشان می دهد که مؤلفه فرزند را از قبل وارد کرده و از آن استفاده می کند. جزء والد یک متغیر آرایه postList را به عنوان یک مرجع واکنشی تعریف می کند. سپس کامپوننت یک تابع addPosts را تعریف می‌کند که اجرا می‌شود و آرگومان پست را می‌گیرد. تابع با متد push() یک پست جدید به آرایه postList اضافه می کند.

شنونده رویداد با دکمه @ کلیک، رویداد سفارشی را که ChildComponent با کلیک روی دکمه منتشر می‌کند، ضبط می‌کند. این رویداد باعث می شود که تابع addPosts اجرا شود. در نهایت، بلوک کد دستور v-for را برای رندر کردن لیست ها در Vue به عنصر ul متصل می کند تا روی آرایه postList تکرار شود.

انتشار رویدادها با ماکرو defineEmits

Vue 3 ماکرو defineEmits را معرفی کرد که به صراحت رویدادهایی را که یک مؤلفه می تواند منتشر کند، تعریف می کند. این ماکرو روشی امن برای انتشار رویدادها ارائه می‌کند که منجر به ایجاد یک پایگاه کد ساختاریافته‌تر می‌شود.

در اینجا مثالی از نحوه استفاده از ماکرو defineEmits و فراخوانی آن در مؤلفه فرزند آورده شده است:

<!-- ChildComponent.vue -->
<script setup>
import { ref } from "vue";

const emit = defineEmits(["button-clicked"]);

const post = ref("");

const buttonClick = () => {
  emit("button-clicked", post.value);
};
</script>

<template>
  <div>
    <input type="text" v-model="post" />
    <button v-on:click="buttonClick">Post</button>
  </div>
</template>

در حالی که عملکرد یکسان است، تفاوت های قابل توجهی در نحو کد بین بلوک کد بالا و بلوک با تابع $emit وجود دارد.

در این بلوک کد، ماکرو defineEmits رویدادی که روی دکمه کلیک شده است را تعریف می کند. با فراخوانی این ماکرو، بلوک کد یک تابع $emit را برمی گرداند و به شما امکان می دهد رویدادهای تعریف شده را منتشر کنید. آرایه ای که به ماکرو defineEmits در کامپوننت ارسال می شود شامل تمام رویدادهایی است که باید به مولفه والد ارسال کنید.

بعد، بلوک کد یک تابع دکمه کلیک را تعریف می کند. این تابع رویداد با کلیک روی دکمه و متغیر post را به مؤلفه والد ارسال می کند. بلوک قالب مولفه فرزند یک عنصر دکمه را در خود جای داده است.

عنصر دکمه دارای یک دستور v-on:click است که عملکرد buttonClick را فعال می کند. سپس مؤلفه والد می تواند از مؤلفه فرزند به همان روشی که در روش $emit استفاده کرد استفاده کند.

توسعه دهندگان Vue از معماری مبتنی بر کامپوننت بهره می برند

می‌توانید با انتشار رویدادها با استفاده از روش $emit و ماکرو defineEmits، از یک مؤلفه فرزند با والد آن ارتباط برقرار کنید.

شما می توانید از معماری مبتنی بر کامپوننت Vue بهره مند شوید زیرا به شما امکان می دهد کدهای ساختاریافته تر و مختصرتر بنویسید. با چارچوب‌های جاوا اسکریپت مدرن مانند Vue، می‌توانید از Web Components، یک استاندارد وب W3C، برای دستیابی به این معماری مبتنی بر مؤلفه استفاده کنید.

منبع مقاله