10. پروژه [vuejs-08]: رویدادها مستقل از سلسله‌مراتب کامپوننت و چرخه عمر کامپوننت

پروژه [vuejs-08] نشان می‌دهد که چگونه مؤلفه‌هایی که مستقیماً در سلسله‌مراتب مؤلفه با هم مرتبط نیستند، می‌توانند از طریق رویدادها با یکدیگر ارتباط برقرار کنند. درخت پروژه برای [vuejs-08] به شرح زیر است:

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

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

10.2. اسکریپت [even-bus.js]

اسکریپت [event-bus.js] ابزاری است که برای ایجاد و گوش دادن به رویدادها استفاده خواهیم کرد:


import Vue from 'vue';
const eventBus = new Vue();
export default eventBus;

اسکریپت [event-bus] به سادگی یک نمونه از کلاس [Vue] (خطوط 1–2) ایجاد می‌کند و آن را صادر می‌کند (خط 3). کلاس [Vue] دو متد برای مدیریت رویدادها دارد:

[Vue].$emit(name, data): اجازه می‌دهد رویدادی با نام [nom] و مرتبط با داده‌های [donnée] راه‌اندازی شود؛
[Vue].$on(name, fn): امکان رهگیری و پردازش رویداد با نام [nom] را توسط تابع [fn] فراهم می‌کند. تابع [fn]، داده‌های [donnée] را که توسط صادرکننده رویداد با آن مرتبط شده است، به عنوان پارامتر دریافت خواهد کرد؛

این رسیدگی به رویداد به سلسله‌مراتب کامپوننت‌ها وابسته نیست. کامپوننت‌هایی که مایل به ارتباط به این روش هستند، کافی است از همان نمونه کلاس [Vue] برای ارسال و شنیدن رویدادها استفاده کنند. در مثال ما، از نمونه [eventBus] که توسط اسکریپت قبلی [event-bus.js] تعریف شده است، استفاده خواهیم کرد.

10.3. ویوی اصلی [App.vue]

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


<template>
  <div class="container">
    <b-card>
      <b-alert show variant="success" align="center">
        <h4>[vuejs-08] : événements indépendants de la hiérarchie des composants, cycle de vie des composants</h4>
      </b-alert>
      <!-- سه مؤلفه‌ای که از طریق رویدادها با یکدیگر ارتباط برقرار می‌کنند -->
      <Component1 />
      <Component3 />
      <Component2 />
    </b-card>
  </div>
</template>

<script>
  import Component1 from "./components/Component1";
  import Component2 from "./components/Component2";
  import Component3 from "./components/Component3";
  export default {
    name: "app",
    // کامپوننت‌ها
    components: {
      Component1,
      Component2,
      Component3
    }
  };
</script>

خطوط ۸–۱۰: نمای اصلی [App] از سه مؤلفه [Component1, Component2, Component3] استفاده می‌کند که از طریق رویدادها با یکدیگر ارتباط برقرار خواهند کرد. این سه مؤلفه در سطح یکسان درون نما [App] قرار دارند. علاوه بر این، هیچ رابطه سلسله‌مراتبی بین آن‌ها وجود نخواهد داشت؛

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

کد مؤلفه برای [Component1] به شرح زیر است:


<template>
  <b-row>
    <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 eventBus from "../event-bus.js"
  export default {
    name: "component1",
    //وضعیت مؤلفه
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // روش‌های رسیدگی به رویدادها
    methods: {
      // پردازش رویداد [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    //مدیریت چرخه عمر مؤلفه
    // رویداد [created] – کامپوننت ایجاد شده است
    created() {
      // در حال گوش دادن به رویداد [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

توضیحات

خطوط ۴–۶: یک هشدار که داده‌ی [data] از خط ۱۸ را نمایش می‌دهد. این داده توسط دست‌پرداز رویداد [doSomething] در خط ۲۵ مقداردهی اولیه خواهد شد. این دست‌پردازنده با دریافت رویداد [someEvent] (خط ۳۴) فعال می‌شود. هشدار بر اساس مقدار ویژگی [showMsg] در خط ۱۹ نمایش داده می‌شود. این ویژگی نیز توسط دست‌پرداز رویداد [doSomething] در خط ۲۵ تنظیم می‌شود؛
خط ۳۲: تابع [created] یک رسیدگی‌کننده رویداد است. این تابع رویداد [created] را که رویدادی است که در طول چرخه عمر مؤلفه ایجاد می‌شود، رسیدگی می‌کند. رویدادهای دیگری نیز وجود دارند، مانند [beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed]. رویداد [created] هنگام ایجاد کامپوننت فعال می‌شود؛
خط ۱۲: نمونه [eventBus] از کلاس [Vue] وارد می‌شود؛
خط ۳۴: برای گوش دادن به رویداد [someEvent] استفاده می‌شود. هنگامی که این رویداد رخ می‌دهد، متد [doSomething] در خط ۲۵ فراخوانی می‌شود؛
خط 25: متد [doSomething]، داده را به عنوان پارامتر [data] دریافت می‌کند؛ این داده همان چیزی است که فرستنده رویداد [someEvent] با رویداد مرتبط کرده است؛
خطوط 26–27: وضعیت کامپوننت به‌روزرسانی می‌شود تا هشدار در خطوط 4–6 داده‌های دریافتی را نمایش دهد؛

10.5. کامپوننت [Component2]

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


<template>
  <div>
    <b-button @click="createEvent">Créer un événement</b-button>
  </div>
</template>
<!-- اسکریپت -->
<script>
  import eventBus from '../event-bus.js'
  export default {
    name: "component2",
    // روش‌های رسیدگی به رویداد
    methods: {
      createEvent() {
        eventBus.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

نظرات

خط ۳: یک دکمه برای ایجاد یک رویداد. هنگامی که کاربر روی این دکمه کلیک می‌کند، متد [createEvent] در خط ۱۳ فراخوانی می‌شود؛
خط ۸: نمونه [eventBus] که توسط اسکریپت [event-bus.js] تعریف شده است، وارد می‌شود؛
خط ۱۴: این نمونه برای ایجاد رویدادی به نام [someEvent] که با داده‌های [{ x: 2, y: 4 }] مرتبط است، استفاده می‌شود. در نهایت، هنگامی که کاربر دکمه خط ۳ را کلیک می‌کند، رویداد [someEvent] فعال می‌شود. با به یاد آوردن تعریف [Component1]، این رویداد را رهگیری می‌کند؛

10.6. کامپوننت [Component3]

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


<template>
  <b-row>
    <b-col>
      <b-alert show
               v-if="showMsg">Evénement [someEvent] intercepté par [Component3]. Valeur reçue={{data}}</b-alert>
    </b-col>
  </b-row>
</template>

<script>
  import eventBus from "../event-bus.js"
  export default {
    name: "component3",
    //وضعیت مؤلفه
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    methods: {
      // پردازش رویداد [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    //مدیریت چرخه عمر مؤلفه
    //رویداد [created] – کامپوننت ایجاد شده است
    created() {
      // در حال گوش دادن به رویداد [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

[Component3] یک نسخهٔ کپی از [Component1] است. این کامپوننت صرفاً برای نشان دادن اینکه یک رویداد می‌تواند توسط چندین کامپوننت رهگیری شود، گنجانده شده است.