Vue的實例方法指的是Vue實例對象上的方法,可以通過this調用并執行。在Vue中,使用$符號進行方法綁定,可以將方法直接綁定到Vue實例對象上,便于在組件中使用。Vue實例方法綁定有以下幾種方式:
const vm = new Vue({ data: { message: 'Hello Vue!' }, methods: { sayHello() { console.log(this.message) } } }) vm.$mount('#app')
使用methods屬性進行綁定
在Vue的選項中添加methods屬性,該屬性的值為一個對象,其中包括需要綁定的方法。
const vm = new Vue({ methods: { sayHello() { console.log('hello') } } })
在此例子中,我們定義了一個叫做sayHello的方法。接著就可以在Vue實例中以vm.sayHello()的方式進行調用了。
綁定一個方法名為init的方法
const vm = new Vue({}) Vue.prototype.init = function () { console.log('init') } vm.init()
在此例子中,我們使用Vue.prototype添加方法,該方法可以在所有Vue實例中訪問。
在組件中使用methods屬性
Vue.component('my-component', { methods: { sayHello() { alert('hello') } } })
在此例子中,我們定義了一個叫做my-component的組件。接著就可以在模板中使用組件,點擊按鈕調用sayHello方法,如下所示:
使用$on和$emit方法
const vm = new Vue({}) vm.$on('init', function () { console.log('init') }) vm.$emit('init')
在此例子中,我們使用vm.$on方法監聽init事件,接著通過vm.$emit方法觸發該事件,并執行回調函數中定義的方法。
使用Vue.set方法動態添加屬性
Vue.set(vm.obj, 'key', 'value')
在此例子中,我們使用Vue.set方法動態添加屬性,該方法會在響應式系統中注冊該屬性。例子中的obj可以是Vue實例中的data屬性,在data中添加屬性后也會注冊到響應式系統中。