ویوو جی‌اس از راه بهتر - همه چیز درباره methods

سلام دوستان. پراپرتی methods یکی از اجزای نمونه (Vue Instance) و یا یک کامپوننت هست که توی اون می‌تونیم متدها (توابع) رو تعریف کنیم تا توسط قسمت‌های مختلف برنامه (مثلا توی رویدادها) استفاده بشه.

 

تعریف کردن یک متد

توی نمونه یا یک کامپوننت، پراپرتی methods یک آبجکت هست که توی اون متدها رو بصورت key/value تعریف می‌کنیم:

const app = new Vue({
    methods: {
        sayHello: function() {
            return 'Hello';
        }
    }
});

توی کد بالا sayHello یک متد ساده هست که توسط قسمت‌های مختلف برنامه می‌تونه استفاده بشه.

نکته: بهتره از حالت کوتاه شده توابع برای متدها استفاده کنیم:

methods: {
    // Longer, bad
    sayHello: function() {
        return 'Hello';
    },
    // Shorter, better
    sayHello() {
        return 'Hello';
    }
}

 

فراخونی یک متد

بستگی به موقعیت، راه‌های مختلفی برای فراخونی یک متد وجود داره.

فراخونی داخل نمونه
اگه بخوایم داخل نمونه مثلا توی یک متد دیگه به یک متد دسترسی پیدا کنیم کافیه از this استفاده کنیم. مثل خط ۳ و ۶ و ۱۳ کد زیر:

const app = new Vue({
    created() {
        this.getHello();
    },
    mounted() {
        this.sayHello();
    },
    methods: {
        sayHello() {
            return 'Hello';
        },
        getHello() {
            return this.sayHello();
        }
    }
});

 

فراخونی بیرون از نمونه
برای دسترسی به یک متد بیرون از نمونه، اگه نمونه به یک متغیر نسبت داده شده باشه و به این متغیر دسترسی داشته باشیم می‌تونیم از متدها به صورت خط ۹ استفاده کنیم:

const app = new Vue({
    methods: {
        sayHello: function() {
            return 'Hello';
        }
    }
});

console.log(app.sayHello());

 

فراخونی داخل View
توی View معمولا از متدها برای مدیریت رویدادها (Event Handling) استفاده میشه. توی View ما به همه‌ی متدها مثل اعضای data دسترسی داریم. توی خط ۲ زیر وقتی روی دکمه کلیک شد متد پاس داده شده اجرا میشه:

<div id="app">
    <button v-on:click="sayHello()">Say Hello</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    const app = new Vue({
        el: "#app",
        methods: {
            sayHello() {
                alert('Hello');
            }
        }
    });
</script>

با رویدادها بعدا آشنا می‌شیم.

 

پاس دادن پارامتر به متدها

اگه متدهای ویوو به پارامتر نیاز داشته باشن، مثل توابع معمولی پارامترها رو پاس می‌دیم:

<div id="app">
    <button v-on:click="sayHello('Hallo')">Say Hello</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    const app = new Vue({
        el: "#app",
        methods: {
            sayHello(text) {
                alert(text);
            },
            getHello() {
                this.sayHello('Salut');
            }
        }
    });
</script>

اگه یک متد توسط یک رویداد توی View فراخونی شده باشه، برای دسترسی به جزییات رویداد (مثلا المنتی که روش کلیک شده) از روش زیر استفاده می‌کنیم:

<div id="app">
    <button v-on:click="sayHello">Say Hello</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    const app = new Vue({
        el: "#app",
        methods: {
            sayHello(event) {
                console.log(event);
            },
        }
    });
</script>

همونطور که می‌بینید پرانتزهای متد رو توی خط ۲ برداشتم و توی خط ۱۱ برای متد یک پارامتر به اسم event تعریف کردم. با این کار رویداد به متد پاس داده میشه. اما اگه متد ما نیاز به پارامتر داشته باشه چطور؟

هنگام پاس دادن پارامتر به متد، $event رو هم پاس میدیم:

<div id="app">
    <button v-on:click="sayHello('Salut', $event)">Say Hello</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    const app = new Vue({
        el: "#app",
        methods: {
            sayHello(message, event) {
                alert(message);
                console.log(event.target);
            },
        }
    });
</script>

 

دسترسی به data توی یک متد

همه‌ی اجزای data نمونه توی متدها با this قابل دسترسی هستن:

const app = new Vue({
    data: {
        message: "Hello"
    },
    methods: {
        sayHello() {
            alert(this.message);
        },
    }
});

app.sayHello();

دقت کنین که this برای دسترسی به data توی متدهایی که با Arrow Function نوشته شدن کار نمی‌کنه:

const app = new Vue({
    data: {
        message: "Hello"
    },
    methods: {
        sayHello: () => {
            alert(this.message);
        },
    }
});

app.sayHello(); // undefined

پس باید برای متدها از توابع معمولی استفاده کنیم.

برای درک خاصیت this و Arrow Function ها پست‌های زیر رو ببینید:

Arrow Function در جاوااسکریپت به زبان ساده
همه چیز درباره this در جاوا اسکریپت

خب دوستان این پست هم به پایان رسید. منتظر قسمت‌های بعدی باشین. روزتون خوش ✌️