在Vue中,一個核心的概念就是組件,組件是Vue應用中的一個抽象概念,可以拆分為更小的可復用的組件。與React類似,Vue組件可以接受props,可以在內部使用data數據(或者響應式屬性),但是還有一個非常重要的概念,就是事件。
Vue的事件模型本質上是發布訂閱模型,Vue實例可以通過$on()方法監聽事件,可以通過$emit()方法觸發事件。Vue組件和實例都可以使用這些方法來實現事件的發起和監聽。
// Vue實例中定義事件 const vm = new Vue(); vm.$on('my-event', function (msg) { console.log(msg); }); // 觸發事件 vm.$emit('my-event', 'Hello Vue!');
以上代碼演示了如何在Vue實例中注冊事件,以及如何觸發事件。注意$on和$emit方法第一個參數必須是事件名稱,后面可以傳遞任意數據,這些數據將作為參數傳遞給回調函數。$emit方法可以攜帶多個參數,但是回調函數只能接受第一個參數。
在Vue組件中,可以使用v-on指令來監聽事件,例如:
Vue.component('my-component', { template: '<button v-on:click="onClick">Click me</button>', methods: { onClick: function () { this.$emit('my-event'); } } });
以上代碼演示了如何在Vue組件中使用v-on指令來監聽事件,并通過$emit方法觸發事件。這里定義了一個按鈕組件,點擊按鈕會觸發onClick方法,然后通過$emit方法觸發my-event事件。
除了v-on指令之外,還可以使用@符號作為v-on的簡寫,例如:
<button @click="onClick">Click me</button>
以上代碼與之前的代碼等價。
需要注意的是,在Vue組件中使用事件時,事件名稱不能使用kebab-case(使用連字符,“-”)命名方式,而是使用camelCase(小駝峰式命名法)命名方式。因此應該使用myEvent而不是my-event。
Vue還允許在父組件中使用v-on指令來監聽子組件發出的事件。
<my-component @my-event="handleEvent"></my-component> ... methods: { handleEvent: function () { console.log('my-event triggered'); } }
以上代碼演示了如何在父組件中使用v-on指令來監聽子組件my-event事件。當子組件觸發my-event事件時,就會調用handleEvent方法。
總之,Vue的事件模型提供了一種非常方便的機制來實現組件之間的通信。你可以在Vue組件中使用$emit方法觸發自定義事件,在父組件中使用v-on指令來監聽子組件的事件,也可以在Vue實例中注冊事件來監聽全局性事件。