فرادرسمدیریت رویداد در کامپوننت Vue.js — از صفر تا صد
Vue.js یک فریمورک وب‌اپلیکیشن با استفاده آسان است که می‌توان از آن برای توسعه اپلیکیشن‌های تعاملی فرانت بهره جست. در این مقاله به بررسی شیوه مدیریت رویداد در کامپوننت Vue.js می‌پردازیم و با شیوه استفاده از v-model در کامپوننت‌های سفارشی و همچنین روش ارسال داده‌ها بین کامپوننت‌های والد و فرزند آشنا خواهیم شد.
گوش دادن به رویدادهای کامپوننت فرزند
در Vue.js امکان ارسال رویدادها از کامپوننت فرزند به والد جهت اجرای کد در کامپوننت والد وجود دارد.
برای نمونه اگر بخواهیم یک دکمه به هر مطلب اضافه کنیم تا فونت صفحه را عوض کند، می‌توانیم به صورت زیر عمل کنیم:
- فایل src/index.js
1Vue.component("post", {
2 props: ["post"],
3 template: `
4 <div>
5 <h2>{{post.title}}</h2>
6 <div>{{post.content}}</div>
7 <button v-on:click="$emit('change-font')">
8 Change Font
9 </button>
10 </div>
11 `
12});
13new Vue({
14 el: "#app",
15 data: {
16 posts: [{ title: "Foo", content: "foo" }, { title: "Bar", content: "bar" }],
17 font: ""
18 },
19 methods: {
20 changeFont() {
21 this.font = this.font === "" ? "courier" : "";
22 }
23 }
24});ما متد changeFont را اضافه کرده‌ایم تا امکان تغییر فونت در اپلیکیشن Vue وجود داشته باشد. این متد زمانی که رویداد change-font از سوی کامپوننت post ارسال شود، فراخوانی خواهد شد. رویداد change-font زمانی از سوی post ارسال می‌شود که کاربر روی دکمه Change Font کلیک کند. این رویداد با استفاده از متد emit$ ارسال می‌شود. رشته‌ای که فرستاده می‌شود، همان نام رویداد است.
- فایل index.html
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>App</title>
5 <meta charset="UTF-8" />
6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <div v-bind:style="{'font-family': font}">
11 <post
12 v-for="post in posts"
13 v-bind:post="post"
14 v-on:change-font="changeFont"
15 ></post>
16 </div>
17 </div>
18 <script src="src/index.js"></script>
19 </body>
20</html>در قالب یک خصوصیت به نام v-bind:style داریم که فونت div را به صورت دینامیک با استفاده از دستور زیر تعیین می‌کند:
v-bind:style=”{‘font-family’: font}”
زمانی که رویداد change-font دریافت می‌شود، متد changeFont فراخوانی می‌شود تا فونت بین دو گزینه فونت Courier و فونت پیش‌فرض تغییر یابد.
متد emit$ نیز یک آرگومان دوم با مقداری که می‌خواهیم به والد بازگشت یابد می‌گیرد. برای نمونه می‌توانیم کد تغییر فونت را به صورت زیر بازنویسی کنیم.
- فایل src/index.js
1Vue.component("post", {
2 props: ["post"],
3 template: `
4 <div>
5 <h2>{{post.title}}</h2>
6 <div>{{post.content}}</div>
7 <button v-on:click="$emit('change-font', 'courier')">
8 Change Font
9 </button>
10 </div>
11 `
12});
13new Vue({
14 el: "#app",
15 data: {
16 posts: [{ title: "Foo", content: "foo" }, { title: "Bar", content: "bar" }],
17 font: ""
18 },
19 methods: {
20 changeFont(font) {
21 this.font = this.font === font ? "" : font;
22 }
23 }
24});در کد فوق عبارت 'courier' را به تابع emit$ ارسال می‌کنیم. آیتم موجود در آرگومان دوم به صورت event$ در کامپوننت والد در اختیار ما قرار می‌گیرد.
- فایل index.html
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>App</title>
5 <meta charset="UTF-8" />
6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <div v-bind:style="{'font-family': font}">
11 <post
12 v-for="post in posts"
13 v-bind:post="post"
14 v-on:change-font="changeFont($event)"
15 ></post>
16 </div>
17 </div>
18 <script src="src/index.js"></script>
19 </body>
20</html>در این کد، اقدام به ارسال template$ می‌کنیم که شامل 'courier' است و به متد changeFont ارسال می‌شود. این متد، فونت را بین font که ما به صورت آرگومان ارسال کردیم و یک رشته خالی تغییر می‌دهد. بنابراین همان کار قبلی را انجام می‌دهد. بدین ترتیب می‌توانیم داده‌ها را از کامپوننت فرزند به کامپوننت والد ارسال کنیم.
استفاده از v-model روی کامپوننت‌ها
v-model همان ترکیب v-bind:value و v-on:input با هم است. یعنی:
<input v-model="text">
معادل همان کد زیر است:
<input v-bind:value="text" v-on:input="text= $event.target.value" >
از آنجا که کامپوننت‌ها props را می‌گیرند و رویدادها را ارسال می‌کنند، می‌توانیم value و اتصال رویداد input را در دایرکتیو v-model ترکیب کنیم. برای نمونه می‌توانیم از آن برای ساختن ورودی سفارشی خاص خود به صورت زیر بهره بگیریم:
- فایل src/index.js
1Vue.component("styled-input", {
2 props: ["value"],
3 template: `
4 <input
5 v-bind:style="{'font-family':'courier'}"
6 v-bind:value="value"
7 v-on:input="$emit('input', $event.target.value)"
8 >
9 `
10});
11new Vue({
12 el: "#app",
13 data: {
14 text: ""
15 }
16});در کد فوق، کامپوننت style-input را طوری ایجاد کردیم که فونت ورودی را به Courier تغییر دهیم. ضمناً از v-bind:value برای به دست آوردن مقدار prop به نام value و ارسال رویداد input به صورت متنی که در کادر ورودی وارد شده است استفاده می‌کنیم.
- فایل index.html
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>App</title>
5 <meta charset="UTF-8" />
6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <styled-input v-model="text"></styled-input>
11 <br />
12 {{text}}
13 </div>
14 <script src="src/index.js"></script>
15 </body>
16</html>در کد فوق، می‌توانیم از v-model برای اتصال به فیلد داده text استفاده کنیم، زیرا v-model همان ترکیب v-bind:value و v-on:input است. styled-input رویداد input را ارسال کرده و prop به نام value را می‌گیرد و از این رو می‌توانیم آن‌ها را در v-model ترکیب کنیم.
سخن پایانی
امکان ارسال رویدادها با استفاده از emit$ از کامپوننت فرزند به والد وجود دارد. این متد دو آرگومان می‌گیرد که آرگومان نخست رشته‌ای برای نام رویداد و دومی شیئی است که باید به والد ارسال شود.
کامپوننت والد به شیء ارسالی از فرزند از طریق گوش دادن به رویداد با دایرکتیو v-on دسترسی دارد و سپس آن‌ها را از آیتم ارسالی از فرزند با شیء event$ بازیابی می‌کند.
v-bind:value و v-on:input همان v-model هستند، بنابراین v-bind:value و v-on:input می‌توانند در یک v-model واحد ترکیب شوند و در کامپوننت‌های سفارشی مورد استفاده قرار گیرند. بدین ترتیب کار ساخت ورودی‌های سفارشی بسیار آسان می‌شود.
اگر این مطلب برای شما مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزشهای جاوا اسکریپت
- مجموعه آموزشهای برنامهنویسی
- آموزش JavaScript ES6 (جاوا اسکریپت)
- آموزش Vue.js — مجموعه مقالات مجله فرادرس
- آموزش Vue.js: ایجاد نخستین اپلیکیشن با Vue CLI — بخش دوم
==
