## 如何給由組件觸發的事件中傳入自定義的參數 ### 業務場景1 1. 以簡單的輪播圖為例，這個功能幾乎在所有的移動端應用里都會有，是個很好的例子。 ```jsx <template> <div> <u-swiper keynName="image" height=”325rpx" :list="SwiperList" /> </div> </template> <script> export default { data() { return { SwiperList: [ { id: 1, image: 'https://images.unsplash.com/photo-1648737154547-b0dfd281c51e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80', title: '圖片1', url: '/pages/category/category?id=1' }, { id: 2, image: 'https://images.unsplash.com/photo-1648737154547-b0dfd281c51e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80', title: '圖片2', url: '/pages/category/category?id=2' } ] } } } </script> ``` 以上這段代碼就可以為我們的應用添加輪播圖了，但是實際上的需求往往并不是這么簡單。 例如：希望用戶點擊輪播圖以后可以跳轉到指定的鏈接（通過url給出） 很自然的，根據文檔，我們找到輪播圖組件有一個點擊事件，我們可以利用它來實現這個需求。 ```jsx <template> <div> <u-swiper keynName="image" height=”325rpx" :list="SwiperList" @click="onClickSwiper" /> </div> </template> <script> export default { methods: { onClickSwiper(index) { // 組件回調中會給我們點擊的index let url = this.SwiperList[index].url; uni.navigateTo({ url, fail: e => console.log(e); }) } } } </script> ``` 這段代碼可以很好的工作，能夠滿足業務場景下的需求。但是通常情況下，首頁不止有輪播圖，而可能還有被稱為《金剛區》的快捷導航菜單區域，通常需要這些區域也是可點擊的，當然你可以再寫一個onClickQuickNav函數來單獨處理這個邏輯（而且會工作的很好），但是我們能不能寫一個通用的函數來解決這個頁面的需求呢？ 所以我們封裝函數如下： ```jsx export default { methods: { onNavigate(url = '') { if(typeof url !== 'string' || url === '') { console.error(’url必填‘); return; } uni.navigateTo({ url, fail: e => { console.error(`跳轉失敗，理由是: ${e.errMsg}`) } }) } } } ``` 現在函數非常簡單的接受一個字符串，原本的調用方式會直接報錯，我們如何能夠僅靠這個函數來滿足業務場景需求呢？這就是本題的關鍵：對于由組件觸發的事件中，我們能不能有機會在調用我們的methods的之前適當的裝飾參數呢？ 當然是有的，現在來逐一講解： #### 方案1： $event 我們來摘抄官方文檔的一段話：  > Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special `$event` variable: 這段話的意思是說，有時候我們希望能夠在內聯v-on里訪問DOM的原生事件對象，你可以使用$event這個特別的關鍵字來表示它。 所以我們可以把代碼改造如下： ```jsx <template> <div> <u-swiper keynName="image" height=”325rpx" :list="SwiperList" @click="onNavigate(SwiperList[$event].url)" /> </div> </template> ``` 但是這個方案在部分平臺可能不會如預期那樣工作，現在我們來講解第二種方案。 #### 方案2： 內聯的減頭函數 這里的關鍵點是，箭頭函數可以直接作為js表達式來給vue使用。我們直接來看例子： ```jsx <template> <div> <u-swiper keynName="image" height=”325rpx" :list="SwiperList" @click="index => onNavigate(SwiperList[index].url)" /> </div> </template> ``` 這其實等價于如下寫法： ```vue <template> <div> <u-swiper keynName="image" height=”325rpx" :list="SwiperList" @click="wrapper" /> </div> </template> <script> export default { methods: { wrapper(index) { this.onNavigate(this.SwiperList[index].url); } } } </script> ``` 只不過這么寫很呆而已。 > PS: 通常你應該選擇方案2（內聯的箭頭函數），方案1（$event訪問原始參數）的平臺兼容性并沒有想象的好 ### 業務場景2 參考GitHub issues: [建議將Checkbox name屬性類型增加一個Object · Issue #292 · umicro/uView2.0 (github.com)](https://github.com/umicro/uView2.0/issues/292) > 本文作者: 不愛喝橙子汁