Vue — Components

Defining components

<!-- Button.vue -->
<template>
  <button class="btn" :class="type">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    type: {
      type: String,
      default: 'primary'
    }
  }
}
</script>

<style scoped>
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary { background: #3498db; color: white; }
.secondary { background: #2ecc71; color: white; }
.danger { background: #e74c3c; color: white; }
</style>

Using components

<template>
  <div>
    <MyButton type="primary">Click Me</MyButton>
    <MyButton type="secondary">Cancel</MyButton>
  </div>
</template>

<script>
import MyButton from './MyButton.vue'

export default {
  components: {
    MyButton
  }
}
</script>

Component registration

// Local registration
import MyButton from './MyButton.vue'

export default {
  components: { MyButton }
}

// Global registration
app.component('MyButton', MyButton)

Props

<script>
export default {
  props: {
    title: String,
    count: Number,
    isActive: Boolean,
    items: Array,
    user: Object,
    size: {
      type: String,
      default: 'medium',
      validator: (val) => ['small', 'medium', 'large'].includes(val)
    }
  }
}
</script>

Events

<template>
  <button @click="$emit('click', $event)">Click</button>
</template>

<script>
export default {
  emits: ['click']
}
</script>

Slots

<template>
  <div class="card">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>

Mini Practice

1. Create a reusable button component
2. Pass props and handle events
3. Use named slots
4. Add scoped styles

Up Next

Continue with Props - Passing data to child components.