Components Can Be Loaded Globally or Locally.
Vuejs provides two ways to load components – one at the Vue instance and the other at the component level (at the component you want to use). Both ways have their own benefits.
Loading a compenent globally makes it accessible from any template in your app including subcomponents. It limits the number of times you import your global component into subcomponenets. Also, if you load the components globally, you won’t get the “ did you register the correctly component? “. Note, load the global component sparingly, it will inflate your app, and even if it’s not used it will still be built by Weppack.
1 2 3 4 5 6 | import Vue from 'vue'; import Editor from './componetns/Editor.vue' //Where 'editor' is the name of the component <editor></editor> Vue.component('editor', Editor); |
Loading local components provide you with independent components and only load them when needed. When combined with Webpack, you can lazy-load componenets only as they are used. This makes the initial application file size much smaller and reduces load times.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <template> <section> <editor></editor> </section> </template> <script> import Editor from './Editor' export default { name: 'dashboard', components: { Editor } } </script> |
Lazy Loading / Async Components
Lazy load components use Webpack’s dynamic imports. Vue supports lazy loading of your components at render time and code splitting . These optimizations allow code in the component to be loaded only when needed, reducing HTTP requests, and file sizes. The great part of this feature is that it works with both global loaded and local loaded.
Globally loading async components:
1 2 3 4 5 6 | import Vue from 'vue'; //Where 'editor' is the name of the component <editor></editor> //Returns a promise that only gets called when the compoent is rendered and then cached. Vue.component('editor', () => import('./componetns/Editor.vue')); |
Locally loading async components:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <template> <section> <editor></editor> </section> </template> <script> export default { name: 'dashboard', components: { 'Editor': () => import('./Editor') } } </script> |
Required Props
There are several ways to create prop for a component. You can either specify an array of strings to represent the name prop or you can pass an object whose keys are the prop name and configuration of the object.
Required key expects a true or false value. True will generate an error if the prop is not set when the component is used and false (the default value) will not ask or throw an error if the prop is not set.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <template> <section> <editor v-if="isAdmin"></editor> </section> </template> <script> export default { name: 'Editor', props: { enabled: {}, isAdmin: { required: true } } } </script> |
Trigger Custom Events with $ emit
Communication between the child and parent component can be accomplished by using $emit to custom events. The $emit function accepts a string for the event name and an optional value emitted. To listen for the event, simply add @eventName to the component that generates the event and pass it on to your event handler.
Child component:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <template> <section> <button @click="onClick">Save</button> </section> </template> <script> export default { name: 'triggerEvent', methods: { onClick() { this.$emit(save); } } } </script> |
Parent component:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <template> <section> <p v-show="showSaveMsg">Thanks for Listening for the saved event</p> <trigger-event @save="onSave"></trigger-event> </section> </template> <script> export default { name: 'TriggerEvent', components:{ TriggerEvent, }, data(){ return { showSaveMsg: false } }, methods: { onSave() { this.showSaveMsg = true; } } } </script> |