在Vue中,使用emit傳遞參數是非常常見的操作。emit允許你在子組件中觸發父組件中綁定在該組件標簽上的自定義事件。子組件可以向上級組件傳遞一些數據,父級組件可以在自定義事件方法中接收這些數據。
// 父組件中定義自定義事件 <template> <ChildComponent v-on:custom-event="handleCustomEvent"></ChildComponent> </template> <script> export default { methods: { handleCustomEvent(payload) { console.log(payload) } } } </script> // 子組件中定義根元素 <template> <div> <button v-on:click="emitCustomEvent">Emit</button> </div> </template> <script> export default { methods: { emitCustomEvent() { this.$emit('custom-event', { data: 'some data' }) } } } </script>
在父組件中定義自定義事件的方法中,可以通過接收到的參數進行必要的處理。而在子組件中,通過this.$emit('custom-event', { data: 'some data' })語句,可以觸發父組件中定義的事件,同時傳遞數據對象給父組件。
如果你需要傳遞多個參數,可以將多個數據封裝到一個對象中,然后在emit方法中將該對象作為參數進行傳遞。
// 父組件中定義自定義事件 <template> <ChildComponent v-on:custom-event="handleCustomEvent"></ChildComponent> </template> <script> export default { methods: { handleCustomEvent(payload) { console.log(payload) } } } </script> // 子組件中定義根元素 <template> <div> <button v-on:click="emitCustomEvent">Emit</button> </div> </template> <script> export default { data() { return { payload: { data1: 'some data', data2: 'another data' } } }, methods: { emitCustomEvent() { this.$emit('custom-event', this.payload) } } } </script>
在父組件中,可以通過payload.data1和payload.data2訪問傳遞過來的數據。同樣的,在emit方法中也可以傳遞其他數據類型,如字符串、數字、布爾值等。總之,emit及其參數傳遞的方式非常靈活,可以根據具體需求進行擴展。
上一篇vue 設置默認界面
下一篇vue 資深培訓講師