ارسال اطلاعات از کامپوننت فرزند به کامپوننت پدر (custom events)

ارسال اطلاعات از کامپوننت فرزند به کامپوننت پدر (custom events)

در قسمت اول از فصل دوم یادگرفته ایم که در دنیای وب و موبایل، یکسری Event به کار گرفته می شوند و نحوه استفاده ی تعدادی از آن ها نظیر click و mouse را قبلا برای شما شرح داده ایم. در این قسمت event های مربوط به کیبورد را با یکدیگر بررسی می کنیم.

رویدادهای کیبورد

همانطور که برای کلیک و حرکات ماوس event های click@ و mouseover@ را به کار می بریم، برای رویدادهای کیبورد از دستور keyup@ استفاده می کنیم که مشخص می کند چگونه و با چه دکمه هایی می توان event مورد نظر خود را کنترل کرد.

فرض کنید که یک <input> داشته و می خواهیم در یک فرم با زدن دکمه Enter مقادیر ورودی را submit کنیم. برای این کار باید دکمه مورد نظر خود را قبل از keyup و با یک نقطه به event مورد نظر داده و همانند زیر به کار ببریم.

<!-- only call `vm.submit()` when the `key` is `Enter` -->
<input v-on:keyup.enter="submit">

Vue تعدادی کلمه کلیدی برای استفاده از رویدادهای کیبورد دارد که بعضی از کلیدهای پرکاربرد را ذکر می کنیم:

  • enter.
  • tab.
  • delete.
  • esc.
  • space.
  • up.
  • down.
  • left.
  • right.

مثالی از این Event ها را با هم مشاهده می کنیم:

<html lang="en">
<head>
    <title>VueJs Intermediate - Sokan Academy</title>
</head>
<body>
<div id="app">
    <input type="text" @keyup.enter="showInputValue" :style="styleObj" placeholder="Value you want to enter"/>
    <h3> {{name}}</h3>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            name: '',
            styleObj: {
                width: "30%",
                padding: "12px 20px",
                margin: "8px 0",
                boxSizing: "border-box"
            }
        },
        methods: {
            showInputValue(event) {
                this.name = "' " + event.target.value + " '" + " was entered.";
            }
        }
    });
</script>
</body>
</html>

با وارد کردن هر کلمه ای در ورودی و سپس با زدن دکمه enter کیبورد، نتیجه در خروجی نمایش داده می شود.

رویدادهای اختصاصی

ایجاد رویدادهای اختصاصی و شخصی سازی شده

تمامی eventها و رویدادهای ذکر شده در بالا، پیشفرض و استاندارد خود html می باشند. از آموزش های قبل می دانستیم که Vue یک فریمورک کامپوننت محور می باشد و همچنین می دانستیم که اطلاعات را به راحتی توسط Prop ها از کامپوننت پدر می توان به کامپوننت فرزند ارسال کرد، اما برعکس این روال قابل انجام نیست. در این مقاله با معرفی “custom events” می بینیم که تنها راه ارسال اطلاعات از کامپوننت فرزند به کامپوننت پدر، استفاده از این رویدادهای اختصاصی (custom events) است.

مفهوم رویدادهای اختصاصی به این معناست که کامپوننت فرزند اطلاعات موردنظر را به سوی کامپوننت پدر برای رویداد دلخواهی که منتظر گرفتن اطلاعات است، ارسال می کند.

اکنون در مثالی از این event مفهوم اصلی را بهتر متوجه می شویم:

<html lang="en">
<head>
    <title>VueJs Intermediate - Sokan Academy</title>
</head>
<body>
<div id="app">
    <div>
        <p style = "font-size:25px;">
            VueJS Feature selected : <b>{{ vueFeatureClicked }}</b>
        </p>
        <button-counter
        v-for = "(item, index) in vueFeatures"
        :key="index"
        :item = "item"
        @showvuefeature = "displayFeatureInParent">
        </button-counter>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    Vue.component('button-counter', {
        template:
            `<button style="margin-right: 25px" @click="passItemToParent(item)">
                <span style="font-size:25px;">{{ item }}</span>
            </button>`,
        props:['item'],
        methods: {
            passItemToParent (itemToPass) {
                this.$emit('showvuefeature', itemToPass);
            }
        },
    });
    const vm = new Vue({
        el: '#app',
        data: {
            vueFeatureClicked: "",
            vueFeatures : ["Instance", "Component", "Watchers", "Directives", "Binding", "Animation", "Rendering", "Routing"]
        },
        methods: {
            displayFeatureInParent(item) {
                this.vueFeatureClicked = item;
            }
        }
    })
</script>
</body>
</html>

در این مثال، نام custom event مورد نظر ما showvuefeature می باشد که هر زمان فعال شود، یک تابع به نام displayFeatureInParent صدا زده می شود تا item مورد نظر ما، که از کامپوننت فرزند ارسال شده است، را در خروجی، به وسیله ی متغیر vueFeatureClicked به نمایش درآورد.

در کامپوننت پدر هم با کلیک بر روی button، تابع passItemToParent صدا زده می شود که با استفاده از emit$ و ورود اسمی که برای این رویداد درنظر می گیریم به همراه اطلاعاتی که می خواهیم ارسال کنیم، یک رویداد اختصاصی ایجاد می کند. این رویداد با استفاده از اسمی که برای آن در نظر گرفتیم در کامپوننت پدر منتظر دریافت اطلاعات است. همچنین emit$ علاوه بر فراخوانی تابع displayFeatureInParent در کامپوننت پدر، اطلاعات انتقالی از کامپوننت فرزند را هم به عنوان پارامتر ورودی به این تابع می دهد.

نام دکمه کلیک شده در کامپوننت فرزند با استفاده از custom event ساخته شده توسط emit$ در متغیر vueFeatureClicked قرار می گیرد و در لحظه با تغییر این متغیر، مقادیر جدید نیز در خروجی به نمایش درخواهد آمد.

 

منبع:  

/https://www.mygreatlearning.com/blog/26176-2

دوره در دست تالیف است ... rocket
کاربر میهمان

دوست گرامی شما به عنوان کاربر میهمان در سایت سکان آکادمی حضور دارید لطفاً برای ارسال دیدگاه ابتدا وارد حساب خود شوید

اگر login نکردی برامون ایمیلت رو بنویس: