文章選自我的語雀專欄《不造點輪子你可能都不知道的前端技巧》，

如果你喜歡的話可以關注我的語雀專欄https://www.yuque.com/u548790/technique，或者關注我的官網https://www.chenshiyu.com.cn/

如果你不能忍受知乎糟糕的排版，請點擊查看原文：https://www.yuque.com/u548790/technique/pzv31o

涉及的組件：cascader組件（級聯選擇器）；使用場景：根據數據層級遞歸渲染子結點；使用方法：template內遞歸渲染子組件；代碼參考：
cascader.vue: https://github.com/adnabb/gulu/blob/master/src/cascader.vue
cascader.list.vue: https://github.com/adnabb/gulu/blob/master/src/cascader-list.vue

---

前情提要

cascader.vue文件

source結構如下：

代碼實現

cascader.list.vue文件

注意事項

如果你在需要遞歸組件的內部，有emit操作(this.$emit('xxx'))，那么遞歸的部分html上也需要加上@xxx="xxx"，否則是不可以傳遞到外面的。

以上。

文章選自我的語雀專欄《不造點輪子你可能都不知道的前端技巧》，

如果你喜歡的話可以關注我的語雀專欄https://www.yuque.com/u548790/technique，或者關注我的官網https://www.chenshiyu.com.cn/

如果你不能忍受知乎糟糕的排版，請點擊查看原文：https://www.yuque.com/u548790/technique/pzv31o

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的iview 级联选择组件_vue组件递归渲染实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。