Vue Component Instances

🎯 What are Component Instances?

Every Vue component creates an instance when used. Each instance has its own data, methods, computed properties, and lifecycle. Component instances are independent and can be reused multiple times with different states.


// Each button is a separate instance
<Counter /> // Instance 1
<Counter /> // Instance 2

Instance Properties

📊

$data

Access component's reactive data

console.log(this.$data)

🎨

$el

Root DOM element of instance

this.$el.classList.add('active')

⚙️

$props

Access component props

console.log(this.$props.title)

🔄

$emit

Emit custom events

this.$emit('update', value)

🔹 Creating Component Instances

Components create instances automatically when used:

<template>
  <div>
    <!-- Three separate instances -->
    <Counter />
    <Counter />
    <Counter />
  </div>
</template>

<script setup>
import Counter from './Counter.vue'
</script>

Each <Counter /> has its own independent state and lifecycle.

🔹 Accessing Instance Properties

Use instance properties to interact with the component:

<template>
  <div>
    <h2>{{ title }}</h2>
    <button @click="showInfo">Show Info</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'My Component'
    }
  },
  methods: {
    showInfo() {
      // Access instance properties
      console.log(this.$data)      // Component data
      console.log(this.$el)         // Root element
      console.log(this.$options)    // Component options
    }
  }
}
</script>

Console Output:

{ title: 'My Component' }
<div>...</div>
{ data: ƒ, methods: {...} }

🔹 Instance Methods

Built-in methods available on every instance:

// Force update
this.$forceUpdate()

// Next DOM update cycle
this.$nextTick(() => {
  console.log('DOM updated')
})

// Watch data changes
this.$watch('count', (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`)
})

🔹 Composition API Instance

Access instance in Composition API using getCurrentInstance:

<script setup>
import { getCurrentInstance, onMounted } from 'vue'

const instance = getCurrentInstance()

onMounted(() => {
  // Access instance properties
  console.log(instance.proxy.$el)
  console.log(instance.props)
  
  // Emit events
  instance.emit('custom-event', data)
})
</script>

Note: In Composition API, use composables instead of instance properties when possible.

🔹 Parent-Child Instance Communication

Instances can communicate through props and events:

<!-- Parent Component -->
<template>
  <ChildComponent 
    :message="parentMsg"
    @child-event="handleEvent"
  />
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './Child.vue'

const parentMsg = ref('Hello from parent')

const handleEvent = (data) => {
  console.log('Received from child:', data)
}
</script>

<!-- Child Component -->
<template>
  <button @click="sendToParent">
    {{ message }}
  </button>
</template>

<script setup>
const props = defineProps(['message'])
const emit = defineEmits(['child-event'])

const sendToParent = () => {
  emit('child-event', 'Data from child')
}
</script>

🔹 Instance Lifecycle

Each instance goes through a lifecycle:

Creation: Instance is initialized
Mounting: Instance is added to DOM
Updating: Instance reacts to data changes
Unmounting: Instance is removed from DOM

import { onMounted, onUpdated, onUnmounted } from 'vue'

onMounted(() => {
  console.log('Instance mounted')
})

onUpdated(() => {
  console.log('Instance updated')
})

onUnmounted(() => {
  console.log('Instance unmounted')
})