Vue.js是一個JavaScript框架,提供了很多便利的解決方案,其中包括 $emit 方法。$emit 能夠在父子組件之間通信,可以通過參數傳遞任意類型數據。下面是一個簡單的示例:
//子組件 <template> <button @click="add">add</button> </template> <script> export default { methods: { add() { this.$emit('addNum', 1); } } } </script> //父組件 <template> <div> <child @addNum="handleAdd"></child> <p>{{num}}</p> </div> </template> <script> import child from './child.vue'; export default { components: { child }, data() { return { num: 0 } }, methods: { handleAdd(val) { this.num += val; } } } </script>
在這個示例中,子組件使用 $emit 觸發事件,并將參數傳遞給父組件。父組件監聽子組件的事件,并在事件回調函數中修改 num 的值。
$emit 有一個可選參數,可以指定事件的冒泡級別。在 Vue.js 中默認是父組件的作用域,如果要在整個應用程序內部觸發事件,可以將 level 參數設置為 broadcast。
//在父組件內部觸發事件 this.$emit('refresh', true, { msg: 'hello' }, 'broadcast'); //在整個應用程序內部觸發事件 this.$emit('refresh', true, { msg: 'hello' }, 'broadcast', true);
總的來說,$emit 是一個非常有用的功能,可以輕松實現組件之間的通信。在實際開發中,尤其是在大型項目中,這是一個不可或缺的功能。