9. پروژه [vuejs-07]: انتشار رویداد در سلسله‌مراتب کامپوننت

درخت پروژه به شرح زیر است:

9.1. اسکریپت اصلی [main.js]

اسکریپت اصلی [main.js] بدون تغییر باقی می‌ماند.

9.2. کامپوننت اصلی [App]

کد کامپوننت [App] به شرح زیر است:

<template>
  <div class="container">
    <b-card>
      <b-alert show variant="success" align="center">
        <h4>[vuejs-07] : remontée d'événements dans la hiérarchie des composants</h4>
      </b-alert>
      <Component1 />
    </b-card>
  </div>
</template>

<script>
  import Component1 from './components/Component1'
  export default {
    name: "app",
    components: {
      Component1
    }
  };
</script>

کامپوننت [App] از کامپوننت جدید [Component1] استفاده می‌کند (خطوط 7، 13، 17).

9.3. کامپوننت [Component11]

کد کامپوننت [Component11] به شرح زیر است:

<template>
  <b-button @click="createEvent">Créer un événement</b-button>
</template>
<!-- اسکریپت -->
<script>
  export default {
    name: "component11",
    // متدهای کامپوننت
    methods: {
      // پردازش رویداد [click] روی دکمه
      createEvent() {
        // رویدادی که به یک قطعه داده مرتبط است، فعال می‌شود
        this.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

نظرات

• خطوط ۱–۳: کامپوننت [Component11] تنها شامل یک دکمه قابل کلیک است. با کلیک بر روی آن، متد [createEvent] در خطوط ۱۱–۱۴ اجرا می‌شود؛
• خط ۱۳: هر نمونه از [Vue] دارای متدی به نام [$emit] است که امکان راه‌اندازی یک رویداد را فراهم می‌کند:
  • پارامتر اول نام رویدادی است که در حال راه‌اندازی است؛
  • پارامتر دوم داده‌هایی است که باید با این رویداد مرتبط شود؛
  • رویداد ارسال‌شده در سلسله‌مراتب اجزایی که والدِ [Component11] هستند، به سمت بالا منتقل می‌شود. این انتقال در سلسله‌مراتب ادامه می‌یابد تا زمانی که جزئی را بیابد که قادر به پردازش آن باشد. این انتشار از جزئِ والدِ [Component11] آغاز می‌شود؛

9.4. کامپوننت [Component1]

کد کامپوننت [Component1] به شرح زیر است:

<template>
  <b-row>
    <!-- کامپوننتی که رویداد را فعال می‌کند -->
    <b-col cols="2">
      <Component11 @someEvent="doSomething" />
    </b-col>
    <!-- پیامی که توسط پردازشگر رویداد نمایش داده می‌شود-->
    <b-col>
      <b-alert show
               variant="warning"
               v-if="showMsg">Evénement [someEvent] intercepté par [Component1]. Valeur reçue={{data}}</b-alert>
    </b-col>
  </b-row>
</template>

<script>
  import Component11 from "./Component11";
  export default {
    name: "component1",
    // کامپوننت‌ها
    components: {
      Component11
    },
    //وضعیت کامپوننت
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // متدهای رسیدگی‌کننده به رویداد
    methods: {
      doSomething(data) {
        //شیئی است که با رویداد [someEvent] مرتبط شده است.
        this.data = data;
        // هشدار را نمایش می‌دهد
        this.showMsg = true;
      }
    }
  };
</script>

رندر بصری

توضیحات

• خط ۵: [Component1] والد [Component11] است و بنابراین می‌تواند «گوش دهد» (این اصطلاح است) به رویدادهایی که آن کامپوننت منتشر می‌کند. می‌دانیم که این کامپوننت می‌تواند رویداد [someEvent] را منتشر کند. ویژگی [@someEvent="doSomething"] مشخص می‌کند که اگر رویداد [someEvent] که توسط [Component11] منتشر می‌شود رخ دهد، آنگاه متد [doSomething] در خط ۳۳ باید اجرا شود؛
• خطوط ۹–۱۱: پیامی که توسط متد [doSomething] نمایش داده می‌شود. نمایش آن توسط متغیر بولی [showMsg] در خط ۲۸ کنترل می‌شود. هشدار ویژگی [data] را در خط ۲۷ نمایش می‌دهد؛
• خط ۳۳: متد [doSomething] که وقتی رویداد [someEvent] در خط ۵ رخ می‌دهد اجرا می‌شود، به‌عنوان پارامتر داده‌های [data] مرتبط با این رویداد را دریافت می‌کند. این پارامتر در خط ۲۷ به ویژگی [data] اختصاص داده می‌شود که توسط خط ۱۱ نمایش داده می‌شود؛
• خط ۳۷: ویژگی [showMsg] روی [true] تنظیم می‌شود تا هشدار مربوط به خطوط ۹–۱۱ نمایش داده شود؛

9.5. اجرای پروژه