Component instance - sana028/VueLearningsPoc GitHub Wiki

In Vue js, the component instance is a instance or a copy of the component class/ function.

vue have set of objects and methods for the component instance.

objects :

$attr :

   $attr object used to add fall thorugh data from  the place where component called.

ex:

<child style="background: 'green' />
 in child component: using $attr
<li v-bind=$attr />

where the style attribute will be add on li element.it is read only property.

$data:

  $data object holds the all state properties as a object. The $data object is used when we need to explicitly state that we are referring to a property in the data part .

ex: we can use it when we have same property names for different purposes using $data we can provide consistence of that property.

###    $el :

       The $el object represents the root DOM node of the Vue component.
    The $el object does not exist until the Vue application is mounted.
  usage : when we have more html root elements using $el we can explicitly add styles.

     ###     ex: 
    mounted() {
    console.log(this.$data.color)
    this.$el.children[1].style.backgroundColor = 'lightblue'
}

$refs :

  the refs object hold the DOM data with the ref attribute which is added to a html element.
  we can read or manipulate the DOM data using refs object
  ###  ex: 
    <p ref="el">Hello</p>
    <p ref="e12"></p>
   for second p tag we can insert data dynamically using refs object.
       this.$refs.el2.innerHTML="hello! world" ;

Methods:

$emit:

emit is used to send a custom method which will trigger events or methods and listening those event or methods between parent and child component

$nextTick:

  $nextTick() method will render after DOM update cycle is completed. 
  ex: if we have some api functionality like posting some data to db we can use nexttick in this scenarios
      like once the api posting and rendering DOM completed we can show a popup like the data is updated

$watch:

 The $watch method is useful when you need to set up watchers outside of a component, such as in the root Vue instance, or when you need to watch properties that are not directly associated with a component.