Pre-Caching Other Folders and Files for Faster Navigation Chapter 7An alternative approach would be to use our created function once again, this time on the
folder component itself, triggering the parent method with the path as the argument.
One way of doing this is using the $parent property. When in the folder component,
using this.$parent will allow access to the variables, methods, and computed values on
the dropbox-viewer component.
Add a created function to the folder component and delete the structure watch
property from the Dropbox component. From there, call the parent getFolderStructure
method:
Vue.component('folder', {
template: '<li><strong><a :href="\'#\' + f.path_lower">{{ f.name
}}</a></strong></li>',
props: {
f: Object
},
created() {
this.$parent.getFolderStructure(this.f.path_lower);
}
});Previewing the app proves the validity of this method. Only triggering when there are
folders in the structure, this cleaner technique ties the folder-caching with the folder itself,
rather than getting mixed in with the Dropbox code.
However, this.$parent should be avoided unless necessary, and should only be used in
edge cases. As we have the opportunity to use props, we should do so. It also gives us the
chance to give the function a more meaningful name in the folder context.
Navigate to your HTML view and update the folder component to accept a new prop. We'll
call the prop cache and pass the function in as the value. As the property is dynamic, don't
forget to add a preceding colon:
<folder :f="entry" :cache="getFolderStructure"></folder>Add the cache keyword to the props key in the JavaScript folder component. Inform Vue
that the input will be a function:
Vue.component('folder', {
template: '<li><strong><a :href="\'#\' + f.path_lower">{{ f.name
}}</a></strong></li>',
props: {
f: Object,
cache: Function
}