最近在重構一個複選框組件,原型是select2這個jquery插件, 有興趣的可以去搜下,封裝的很好,但是並不能滿足業務所有需求,最要命的是jquery插件這種以dom驅動數據的庫,並不能和vue和angular這種數據驅動dom的框架很好的結合,所以我用vue的component重構了一下,走了不少彎路,做的demo分享出來,還請大家指點一二!
download地址:http://download.csdn.net/detail/lemon_zhao/9705162
效果圖如下,封裝的應該是蠻抽象的了,只需要傳入下拉框選項list,默認選中list,和回調callback三個參數可以了,在這裏特別說明下父與子是如何通信的,因爲這裏走了不少彎路!!
父級往子組件傳遞數據,通過v-bind綁定數據,子組件接收props裏的數據,通過watch監聽數據改變。
子組件往父級傳遞數據,通過$dispatch派發,綁定到自定義的selected或inputed事件,再觸發父級的回調。