برنامه‌های Vue.jsای از چندین کامپوننت برای بخش بندی هر قسمت تشکیل میشوند و این بخش بندی برای مدیریت بهتر تغییرات، خطایابی، نگهداری و استفاده مجدد (reusable) می‌باشد. فرض کنید تعدادی کامپوننت در برنامه داریم و اطلاعات این کامپوننت‌ها بهم وابسته می‌باشند؛ بطور مثال یک کامپوننت انتخاب دسته بندی را داریم و به محض تغییر این مقدار، میخواهیم لیستی از محصولات پیشنهادی یا پرفروشِ آن دسته بندی، در کامپوننت پایین صفحه نمایش داده شود و یا خرید یک محصول را در نظر بگیرید که بلافاصله محتوای نمایش سبد خرید، بروزرسانی شود. در این مقاله ارتباط از نوع Parent و Child بین کامپوننت‌ها بررسی میشود.
نکته: برای ارسال اطلاعات از کامپوننتِ Parent به Child، از Props استفاده میشود و برای ارتباط از Child به Parent، از emit$ استفاده میشود.
یک برنامه Vue.js با نام vue-communication-part-1 ایجاد نمایید. سپس دو کامپوننت را با نام‌های Parent و Child، در پوشه components ایجاد کنید:
در کامپوننت Parent، یک تابع با نام increase وجود دارد که مقدار متغیر parentCounter را افزایش میدهد. چون قصد داریم مقدار متغیر parentCounter در کامپوننت Child نیز بروزرسانی شود، آن را به کامپوننت Child پاس میدهیم:
<Child :childCounter="parentCounter"/>
محتوای کامپوننت Parent:
<template>
<div>
<div>
<h2>Parent Component</h2>
<!-- را نمایش میدهید parentCounter مقدار -->
<h1>{{ parentCounter }}</h1>
<button @click="increase">Increase Parent</button>
</div>
<div>
<!-- پاس میدهید Child در کامپوننت childCounter را به پراپرتی parentCounter مقدار -->
<!--از طریق decreaseParent سبب اتصال و فراخوانی تابع @callDecreaseParent به decreaseParent با انتساب -->
<!-- میشود Child در کامپوننت callDecreaseMethodInParent تابع -->
<Child :childCounter="parentCounter" @callDecreaseParent="decreaseParent"/>
</div>
</div>
</template>
<script>
//برای استفاده در کامپوننت جاری Child ایمپورت کردن کامپوننت
import Child from "./Child.vue";
export default {
// در این بخش متغیرهای مورد نیاز کامپوننت را تعریف میکنیم
data() {
return {
parentCounter: 0
};
},
components: {
// میتوان آرایه ای از کامپوننت‌ها را در یک کامپوننت استفاده نمود
// در این مثال فقط از یک کامپوننت استفاده شده
Child
},
methods: {
//را یک واحد افزایش میدهد parentCounter این متد مقدار
increase() {
this.parentCounter++;
},
decreaseParent() {
this.parentCounter--;
}
}
};
</script>
<style>
.parent-block,
.child {
text-align: center;
margin: 20px;
padding: 20px;
border: 2px gray solid;
}
</style>
در کامپوننت Child قصد دریافت مقدار پراپرتیِ childCounter را داریم که از طریق کامپوننت Parent، مقدارش تنظیم و بروزرسانی میشود. به این منظور در قسمت props یک متغیر بنام childCounter را ایجاد میکنیم.
Data is the private memory of each component where you can store any variables you need. Props are how you pass this data from a parent component down to a child component
محتوای کامپوننت Child
<template>
<div>
<h3>Child Component</h3>
<!-- را نمایش میدهید childCounter مقدار -->
<h3>{{ childCounter }}</h3>
<button @click="increase">Increase Me</button>
<button @click="callDecreaseMethodInParent">Call Decrease Method In Parent</button>
</div>
</template>
<script>
export default {
// استفاده میشود Child به Parent برای ارتباط بین کامپوننت props از
props: {
childCounter: Number
},
data() {
return {};
},
methods: {
//را یک واحد افزایش میدهد childCounter این متد مقدار
increase() {
this.childCounter++;
},
// فراخوانی میکند Parent را در کامپوننت decreaseParent تابع
callDecreaseMethodInParent() {
this.$emit("callDecreaseParent");
}
}
};
</script>
محتوای کامپوننت اصلی برنامه App.vue:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<parent></parent>
</div>
</template>
<script>
import Parent from "./components/Parent.vue";
export default {
name: "app",
components: {
parent: Parent
}
};
</script>
<style>
#app {
width: 50%;
margin: 0 auto;
text-align: center;
}
</style> اکنون برنامه را با دستور زیر اجرا کنید:
بعد از اجرای دستور فوق، روی گزینه زیر ctrl+click میکنیم تا نتیجه کار در مرورگر قابل رویت باشد:
نمایش صفحه زیر نشان دهنده‌ی درستی انجام کار تا اینجا است:
اکنون روی دکمه‌ی Increase Parent کلیک میکنیم. همزمان مقدار شمارشگر، در هر دو کامپوننت Parent و Child افزایش می‌یابد و این بدین معناست که با استفاده از Props میتوانیم داده‌های دلخواهی را در کامپوننت Child بروز رسانی کنیم. هر زمانی روی دکمه‌ی Increase Me در کامپوننت Child کلیک کنیم، فقط به مقدار شمارشگر درون خودش اضافه میشود و تاثیری را بر شمارشگر Parent ندارد. در واقع یک کپی از مقدار شمارشگر Parent را درون خود دارد.
در ادامه قصد داریم بروزرسانی داده را از Child به Parent انجام دهیم. برای انجام اینکار از emit$ استفاده میکنیم. در دیکشنری Cambridge Dictionary معنی emit به ارسال یک سیگنال ترجمه شده‌است. در واقع بااستفاده از emit میتوانیم یک تابع را در کامپوننت Parent فراخوانی کنیم و در آن تابع، کد دلخواهی را برای دستکاری داده‌ها مینویسیم.
در تابع callDecreaseMethodInParent در کامپوننت Child، کد زیر را قرار میدهیم:
this.$emit("callDecreaseParent"); هر زمان‌که این تابع اجرا شود، یک سیگنال از طریق کد زیر برای کامپوننت Parent ارسال میشود:
<Child @callDecreaseParent="decreaseParent"/>
در کد فوق مشخص شده که با ارسال سیگنال callDecreaseParent، تابع decreaseParent در کامپوننت Parent فراخوانی شود.
کد کامل مثال بالا
نکته: برای اجرای برنامه و دریافت پکیج‌های مورد استفاده در مثال جاری، نیاز است دستور زیر را اجرا کنید:
چند نکته
this.$emit
//dispatches an event to its parent component
کد فوق سبب اجرای یک تابع در کامپوننتِ Parent خودش میشود.
this.$parent
// gives you a reference to the parent component
ارجاعی به کامپوننت Parent خودش را فراهم میکند:
this.$root
// gives you a reference to the root component
زمانیکه چندین کامپوننت تو در تو را داریم یا به اصطلاح nested component، سبب ارجاعی به بالاترین کامپوننت Parent میگردد.
this.$parent.$emit
// will make the parent dispatch the event to its parent
سبب اجرای تابعِ Parent کامپوننتِ Parent جاری میشود. به بیان ساده اگر این کد در کامپوننت فرزند فراخوانی شود، سبب اجرای تابعی در کامپوننت پدربزرگِ خود میشود.
this.$root.$emit
// will make the root dispatch the event to itself
سبب اجرای تابعی در کامپوننت root میشود (بالاترین کامپوننتِ پدرِ کامپوننت جاری).
تابع emit$ دارای آگومان‌های دیگری برای پاس دادن اطلاعات از کامپوننت Child به Parent می‌باشد؛ مثل زمانیکه قصد دارید اطلاعاتی در مورد محصول خریداری شده را به سبد خرید پاس دهید. در مثال دیگری که در ادامه قرار میگیرد نحوه کارکرد ارتباط کامپوننت Parent و Child را در یک برنامه بهتر تجربه میکنیم.
پیاده سازی یک سبد خرید ساده با روش مقاله‌ی جاری
نکته: برای اجرای برنامه و دریافت پکیج‌های مورد استفاده در مثال جاری، نیاز است دستور زیر را اجرا کنید:
همچنین نیاز هست تا پکیچ node-sass را با دستور زیر برای این مثال نصب کنید.
