props is an array of string literals or object references used to pass data from parent component. It can also be in object form when it is desired to have more fine grained control like specifying default values, type of data accepted, whether it is required or optional
data has to be a function which returns an object instead of a plain object. It is so because we require each instance of the component to have its own data for re-usability purpose.
events is an object containing listeners for events to which the component can respond by behavioral change
methods object containing functions defining the behavior associated with the component
computed properties are just like watchers or observables, whenever any dependency changes the properties are recalculated automatically and changes are reflected in DOM instantly if DOM uses any computed properties
ready is a Vue instance's life-cycle hook
Component scoped (not global)
What are components and how to define components?
Components in Vue are like widgets. They allow us to write reusable custom elements with desired behavior.
They are nothing but objects which can contain any/all of the options that the root or any Vue instance can contain, including an HTML template to render.
Components consist of:
• HTML markup: the component's template
• CSS styles: how the HTML markup will be displayed
These can each be written in a separate file, or as a single file with the .vue extension. Below are examples showing both ways:
.VUE - as a single file for the component