vue組件封裝

組件渲染方法選擇

render

優勢：javascript徹底編碼，如能夠經過javascript對象動態配置渲染的內容。
缺點：html標籤層級不明顯、使用其餘插件不能往指定元素上監聽自定義事件、不能用vue響應式等。

template

優勢：html層級維護性好、可直接使用vue雙向綁定、使用其餘插件可向任意標籤監聽自定義事件等
缺點：經過配置動態渲染組件內容時，動態渲染組件內容實現複雜

選擇

template通常用於組件n次封裝，標籤層級複雜的組件；render通常用於組件內還須要根據javascript object配置定製化動態渲染標籤，且標籤層級簡單的組件，或者最裏層組件邏輯封裝，不是組件二次封裝或者沒有使用二次封裝組件的自定義事件，如el-table-column，template通常用於功能合集，如el-table。

組件自定義事件

實現原理：監聽元素原生事件，如click、input，執行事件回調函數，由回調執行相應自定義事件方法。尋找自定義方法過程即爲查詢變量值過程，OA——做用域鏈等。 總結：組件包含獨立的做用域，如自定義事件由$listener,獨自自定義事件對象儲存相應自定義事件。