ووزی مای گای!

ووزی مای گای!استفاده از کامپوننت‌ها، یک راه ساده برای ایجاد کد دوباره قابل‌ استفاده برای برنامه‌های Vue.js است. کامپوننت‌ها را میتوان مانند المان‌هایی مانند تگ‌های HTML دید که میتوانند توسط نمونه اصلی Vue یا کامپوننت های دیگر استفاده شود.برای ایجاد یک کامپوننت در Vue، کافی است که رویه component از constructor ر Vue قطعه کدی مانند کد زیر، آن را تعریف کرد:Vue.component(‘some-component’, {
/* data, methods, etc. go here */
});مرسوم است که در نام‌گذاری کامپوننت، تمام حروف نام، از حروف کوچک انگلیسی باشند و کلمات با خط‌ فاصله از هم جدا شوند.همانطور که میبینید، رویه Vue.component دو ورودی میگیرد. ورودی دوم، object ای است که پیکربندی و تنظیمات آن کامپوننت با آن انجام میشود. تقریبا تمام چیزهایی که میتوانیم به سازنده (constructor) Vue بدهیم. البته دو استثنای el و data وجود دارد.تگ data را نیز ورودی میدهیم ولی متفاوت با شیوه‌ای که به سازنده Vue میدهیم. بجای این که data یک شئ باشد (object)، data ورودی ما به Vue.component باید تابعی باشد که یک شئ برمیگرداند.Vue.component(‘some-component’, {
data: function() {
return {
heading: ‘Some Component’
};
}
});الزام این کار به این است که ما شاید یک کامپوننت را چندین و چند بار در مکان های مختلف استفاده کنیم و احتمالا رفتار مطلوب ما از یک کامپوننت این است که برای خود و مستقلا عمل کند تا این که چند نمونه از یک کامپوننت، منابعی اشتراکی از شئ را استفاده کنند.چند راه برای مشخص کردن یک قالب برای یک کامپوننت وجود دارد.یک راه این است که محتوای قالب را داخل یک تگ با نام همان کامپوننت قرار دهیم. برای این کار لازم است که خصوصیت inline-template را به آن تگ اضافه کنیم.<some-component inline-template>
<div>
<h1>{{heading}}</h1>
<p>This is a component</p>
</div>
</some-component>این روش از ارزش پایینی برخوردار است چرا که در اغلب اوقات ما نیاز داریم تا از کامپوننت ها مکررا استفاده کنیم و این بسیار اذیت کننده است که لازم باشد هر دفعه کد قالب را از نو بنویسیم.یک راه دیگر این است که از تگ برای قالب‌مان استفاده کنیم.<some-component></some-component><script id=&quotsome-template&quot type=&quottext/x-template&quot>
<div>
<h1>{{ heading }}</h1>
<p>This is a component!!!</p>
</div>
Vue.component(‘some-component’, {
data: function() {
return {
heading: ‘Some Component’
};
},
template: ‘#some-template’
});همچنین میتوانیم خصوصیت template را مستقیما به رشته‌ی حاوی متن قالب‌مان هنگام ایجاد یک کامپوننت نسبت دهیم. مانند زیر.Vue.component(‘some-component’, {
data: function() {
return {
heading: ‘Some Component’
};
},
template: ‘<h1>{{heading}}</h1>’
});توجه شود که در تمام قالب‌های بالا، تنها یک المان بلافاصله داخل قالب قرار گرفته و تمام المان های دیگر درون آن قرار دارند. این از الزامات قالب های Vue است.

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *