سلام دوستان. پراپرتی 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>