جلسه ۱۲-معرفی ویژگی Mixins در ویو جی اس

به نام خدا برای اینکه از یک عملکرد مثل تعریف متغییر چند جا بتوانیم استفاده کنیم از ویژگی Mixins استفاده میکنیم . مانند ویژگی های دیگه که تو ویو جی اس هست مانند created ،methods ازش استفاده میکنیم وقتی یک کامپوننت از Mixins استفاده میکنه در واقع داره عملکر Mixins با اون کامپونت ترکیب میشه . اگه شما از یک پیش زمینه php اومده باشید Mixins خیلی عملکر شبیه traits داره .
برای اینکه عملکر Mixins نشون بدیم یک مثال رو با هم مرورم میکنیم ، ما یک Mixins را ایجاد میکنیم که یک داده رو شامل میشه ، بعدش میام تو دوتا کامپوننت (+) مختلف ازش استفاد میکنیم
اچ تی ام ال دوتا کامپوننتمون به صورت زیر میشه

<mixin-example></mixin-example>
    <second-mixin-example></second-mixin-example>

حالا یک شی mixin ایجاد میکنیم ، این در واقع یک شی معمولی جاوا اسکریپتی هستش که شامل یک دیتا فانکشن که یک مقدار داده ای با نام message رو بر می گردونه به صورت زیر
var mixinExample = {
data: function(){
return {
message: 'This message comes from a mixin'
}
}
,
};
برای اینکه ما این mixin رو درون کامپوننت هامون استفاده کنیم باید ویژگی mixins رو با مقادیری از آریه mixin های خودمون رو بهش نصبت بدیم .
Vue.component('mixin-example', {
mixins: [mixinExample],
template: '
First message - {{ message }}
'});
Vue.component('second-mixin-example', {
mixins: [mixinExample],
template: '
Second message - {{ message }}
'});
خب حالا شی ویو جی اس رو ایجاد می کنیم

var app = new Vue({
el: '#app',
});

که خروجی زیر رو به ما میده

First message – This message comes from a mixin

Second message – This message comes from a mixin

موفق باشید
با ما همراه باشید

local_offerevent_note تیر ۳, ۱۳۹۷

account_box ali kaviani


local_offer

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

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