A few things to know when working with Vuejs

Tram Ho

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.

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.

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:

Locally loading async components:

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.

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:

Parent component:

Share the news now

Source : Viblo