از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای Vue PropsVue یک چارچوب جاوا اسکریپت است که به توسعه دهندگان این امکان را می دهد تا اجزایی ایجاد کنند که برای تقسیم رابط کاربری به قطعات کوچکتر به جای ساختن کل UI در یک فایل استفاده می شود. هنگام استفاده از کامپوننت ها، ممکن است بخواهیم داده ها را از مؤلفه والد به مؤلفه فرزند منتقل کنیم…
سرفصلهای مطلب
معرفی
Vue یک چارچوب جاوا اسکریپت است که به توسعه دهندگان اجازه ایجاد می دهد اجزاء که برای تقسیم رابط کاربری به قطعات کوچکتر به جای ساختن کل UI در یک فایل استفاده می شود. هنگام استفاده از کامپوننت‌ها، ممکن است بخواهیم زمانی داده‌ها را از مؤلفه والد به مؤلفه فرزند منتقل کنیم، این معمولاً با خواص، همچنین به عنوان شناخته شده است لوازم جانبی.
در این راهنما، نگاهی عمیق به پروپوزال ها خواهیم داشت، به روش کار لوازم، انواع مختلف پایه، روش انتقال انواع داده ها و بسیاری موارد دیگر نگاهی خواهیم انداخت.
Props چیست؟
لوازم جانبی می تواند یک مفهوم حیاتی برای درک هنگام کار با کامپوننت ها در Vue باشد. Props که مخفف آن است خواص، ما را قادر می سازد تا داده ها و عملکردها را از یک مؤلفه به مؤلفه دیگر منتقل کنیم. درک این نکته مهم است که جریان داده props یک جهته است – ما می‌توانیم داده‌ها را فقط از والد به مؤلفه فرزند منتقل کنیم، نه راه دیگری.
توجه داشته باشید: لوازم هستند فقط خواندنی، به این معنی که مؤلفه فرزند نمی تواند آنها را تغییر دهد زیرا داده ها متعلق به مؤلفه والد است و فقط برای خواندن آن به مؤلفه فرزند منتقل می شود.
اعلام Props در Vue
ثبت آثار ساده است. تنها کاری که باید انجام دهیم این است که آن را به آن اضافه کنیم props آرایه در <scripts> برچسب زدن سپس، می توانیم از آن در برنامه خود استفاده کنیم <template> بخش. این در مؤلفه فرزند، جایی که داده ها از مؤلفه والد دریافت می شود، رخ می دهد:
<template>
<p>{{ name }}</p>
</template>
<script>
export default {
props: ('name')
}
</script>
این است جزء فایل واحد نحو. همچنین، می‌توانید برای یک جزء خاص از طریق زیر ثبت نام کنید:
Vue.component('user-profile', {
props: ('name'),
template: '<p>My name is {{ name }}</p>'
});
اعلان چند پروپ در Vue
props یک آرایه هستند – می توانید هر تعداد که می خواهید اضافه کنید:
<template>
<p>My name is {{ name }} and I am {{ age }} years.</p>
</template>
<script>
export default {
props: (
'name',
'age'
),
}
</script>
انتقال لوازم به اجزای سازنده
ارسال props به کامپوننت‌ها در Vue مشابه انتقال ویژگی‌های HTML به تگ‌های HTML است و این می‌تواند همه انواع داده‌ها، از جمله روش‌ها را بپذیرد. به عنوان مثال، اگر ما یک جزء پروفایل داریم و می خواهیم جزئیات کاربر را به کامپوننت کاربر منتقل کنیم، می توانیم کاری شبیه به این انجام دهیم:
<template>
<UserProfile
v-bind:name="user.name"
:img="user.image"
/>
</template>
لوازم استاتیک و دینامیک
Props را می توان به یکی از دو روش ارسال کرد: به عنوان یک مقدار ثابت یا به عنوان یک مقدار پویا. منظور ما از استاتیک این است که این مقادیر مستقیماً بدون نیاز به کامپوننت ارسال می شوند v-bind یا : (نقطه ویرگول):
<template>
<UserProfile name="John Doe" />
</template>
در حالی که برای مقادیر پویا از v-bind یا آن : میانبر:
<template>
<UserProfile :name=name />
</template>
<script></script>
مقادیر دینامیک ممکن است از data() گزینه اسکریپت جزء ما.
گذراندن وسایل با اپراتورهای سه تایی
اغلب اوقات ما می خواهیم بر اساس داده های متفاوتی ارسال کنیم روی ارزش یک شرط در آن صورت، اپراتور سه تایی مفید است، زیرا می توانیم از آن در داخل یک مقدار prop استفاده کنیم:
<template>
<div id="app">
<Home :title="isHomepage? 'Welcome to the homepage' : 'This is not the Homepage'" />
</div>
</template>
<script></script>
در این مثال، ما آن را بررسی کرده ایم loggedIn ارزش – از آنجایی که هست true (یک کاربر قبلاً وارد شده است) مقدار prop حاصل خواهد شد Log Out.
گذراندن روش ها به عنوان ابزار
همچنین می‌توان روش‌ها را به‌عنوان props به یک مؤلفه فرزند منتقل کرد، که مشابه انتقال انواع داده‌های دیگر عمل می‌کند:
<template>
<ChildComponent :method="myFunction" />
</template>
<script></script>
انواع ارزش props
تا کنون، ما فقط مقادیر رشته را ارسال کرده‌ایم، اما در واقع، هر نوع داده‌ای را می‌توان به عنوان یک پایه ارسال کرد – از جمله اعداد، اشیا، آرایه‌ها، بولی، متدها، تاریخ‌ها و غیره. روی.
توجه داشته باشید: وقتی از یک متد استاتیک برای ارسال یک عدد، شی، آرایه و مقادیر بولی استفاده می کنیم، باید آنها را به Vue متصل کنیم تا به Vue بگوییم که این یک عبارت جاوا اسکریپت است نه یک رشته (منطبق با نام متد).
بنابراین، برای عبور از آنها، آنها را به عنوان یک پاس می کنیم عبارت جاوا اسکریپت (پیچیده شده در گیومه)، که به نوع داده صحیح ارزیابی می شود به طور ضمنی:
<template>
<UserProfile :age="22" />
<UserProfile :married="false" />
<UserProfile :hobbies="('Singing', 'Gaming', 'Reading')" />
<UserProfile
:name="{
firstName: 'John',
lastName: 'Doe'
}"
/>
</template>
با این حال، تبدیل های ضمنی در تنظیمات عملی بدون نقص نیستند. در بیشتر موارد – شما می خواهید انواع را به صراحت مشخص کنید.
مشخص کردن انواع لوازم به طور صریح
با علم به اینکه می‌توانیم هر نوع داده‌ای را به‌عنوان یک پروپوزال ارسال کنیم، بهترین کار این است که با اعلام آنها به‌عنوان بخشی از، نوع پایه‌ای را که می‌خواهیم استفاده کنیم، مشخص کنیم. هدف – شی به جای یک آرایه، و به صراحت نوع آن مقدار را مشخص کنید. این مفید است زیرا Vue یک هشدار هشدار (در حالت توسعه) به آن ارسال می کند console اگر نوع داده ارسال شده با نوع پایه مشخص شده مطابقت نداشته باشد:
<template>
<p>My name is {{ name }} and I am {{ age }} years.</p>
</template>
<script>
export default {
props: {
name: String,
age: Number,
}
}
</script>
کار با لوازم جانبی
همانطور که قبلا گفته شد، هدف اصلی استفاده از props انتقال داده است. فرض کنید ما در حال ساخت برنامه‌ای هستیم که جزئیات کاربر را نمایش می‌دهد – ما ترجیح می‌دهیم اجزای قابل استفاده مجدد ایجاد کنیم تا بتوانیم این داده‌ها را به عنوان ابزار ارسال کنیم، نه اینکه به صورت دستی اجزای جداگانه برای هر کاربر ایجاد کنیم. بیایید یک مؤلفه والد برای آن برنامه ایجاد کنیم:
<template>
<div id="app">
<UserProfile :name='userName' age='22' />
<UserProfile :name='userName' age='18' />
<UserProfile :name='userName' age='27' />
</div>
</template>
<script></script>
و در اینجا کامپوننت فرزند به چه صورت خواهد بود:
<template>
<div>
<h2>My name is {{name}} and I am {{age}} years old.</h2>
</div>
</template>
<script></script>
اعتبار سنجی لوازم
قبلاً دیدیم که افزودن انواع prop به بررسی نوع داده‌های برگردانده شده توسط props کمک می‌کند، که راهی برای اعتبارسنجی props است، اما همچنین می‌توانیم کلید مورد نیاز و مقدار آن را به props اضافه کنیم، همانطور که در زیر نشان داده شده است:
props: {
name: {
type: String,
required: true
}
}
تنظیم مقادیر پایه پیش فرض
در برخی موارد، ممکن است بخواهیم مقادیر پیش‌فرض را تنظیم کنیم تا اگر مؤلفه فرزند نتواند داده‌ها را از مؤلفه والد دریافت کند، چنین داده‌هایی قابل ارائه باشند:
props: {
studentUserName: {
type: String,
required: true,
default: "student##"
},
studentPassword: {
type: String,
required: true,
default: "password123"
},
userImg: {
type: String,
default: "../default-avatar.jpg"
},
},
توجه داشته باشید: مقدار پیش فرض نیز می تواند یک شی یا روشی باشد که مقداری را برمی گرداند.
نتیجه
هنگام استفاده از کامپوننت‌ها، Props بخش مهمی از Vue است. در این مقاله نگاهی انداخته‌ایم به اینکه props چیست، روش استفاده از آنها در Vue، روش اعلام و ثبت آنها، تنظیم مقادیر پیش‌فرض، اعتبارسنجی آنها و غیره.
منتشر شده در 1403-01-08 18:33:06
