Ở bài này mình sẽ cùng nghiên cứu về sự phụ thuộc vòng tròn (Circular References) giữa 2 components với nhau.
Trong dự án thực tế có lúc bạn sẽ gặp trường hợp component A nhúng component B vào và trong component B lại nhúng ngược lại component A.
Ví dụ bạn làm dự án show cây thư mục của 1 folder
<!-- TreeFolder.vue -->
<p>
<span>{{ folder.name }}</span>
<tree-folder-contents :children="folder.children"/>
</p>
<!-- TreeFolderContent.vue -->
<ul>
<li v-for="child in children">
<tree-folder v-if="child.children" :folder="child"/>
<span v-else>{{ child.name }}</span>
</li>
</ul>
Điều này sẽ gây ra lỗi vòng lặp vô tận A nhúng B nhúng rồi B nhúng A rồi lại A nhúng B … lặp vô tân…, vì VueJs sẽ không biết cái nào tới trước cái nào tới sau. do đó nó không thể render được website mà sẽ throw lỗi như sau Failed to mount component: template or render function not defined.
Để giải quyết trường hợp này, chúng ta phải cho Vue biết component nào cần render trước, component nào cần render sau. Tránh tình trạng render cùng 1 lần dẫn đến lỗi trên.
Nhìn ví dụ đoạn code ở trên chúng ta thấy rằng chúng ta cần render TreeFolder (là thèn cha) trước. Tiếp theo sau đó chúng ta mới render thèn TreeFolderContent là thèn con sau.
Chúng ta sẽ làm như sau. Có 2 cách để đạt được điều này
- dùng
beforeCreatehook
// TreeFolder.vue
beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}
- dùng async
import
// TreeFolder.vue
components: {
TreeFolderContents: () => import('./tree-folder-contents.vue')
}
Vấn đề đã được giải quyết!
Tham khảo:
