Suggest an edit

Improve this article

Refine the answer for “What does extends do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`extends` is a Vue (Options API) mechanism that lets you **inherit the settings of one component in another**, similar to `mixins`, but **only from a single "parent" component**.

In simpler terms:

> `extends` **mixes all the options of another component into a component: data, methods, computed, hooks, and so on.**

It's similar to classic inheritance, only for Vue components.

---

## Example of using extends

#### base.js - the base component

```js
export default {
  data() {
    return {
      baseMessage: 'Hello from base'
    }
  },
  methods: {
    greet() {
      console.log(this.baseMessage)
    }
  }
}
```

#### the child component

```js
import base from './base.js'

export default {
  extends: base,

data() {
    return {
      childMessage: 'Hello from child'
    }
  }
}
```

Now the component has:

- `baseMessage` from the base component
- the `greet()` method from the base component
- `childMessage` - its own state

---

## Why do you need extends?

#### 1. Inheriting base components

You can create a "base" component with:

- base validation
- base API methods
- base computed properties
- base hooks

and reuse them.

---

#### 2. Creating behavior templates for components

For example, a shared component:

- with the same loading logic
- with the same methods
- with the same data()

---

#### 3. It's an alternative to mixins (but simpler and cleaner)

While mixins can be many, `extends` is only one.

---

## Important features of extends

#### 1. A component inherits **all options** of the base component

data, methods, computed, watch, lifecycle hooks, props, and so on.

---

#### 2. On a name conflict, the child component wins

```js
// base.js
methods: { greet() { console.log('base') } }

// child
methods: { greet() { console.log('child') } }
```

Call result:

```
child
```

---

#### 3. Hooks are merged, but the order is like mixins:

1. the parent's hooks
2. the child's hooks

---

#### 4. It can be used together with mixins (not recommended)

---

#### 5. Rarely used in Vue 3

Because the Composition API completely removes the need for inheritance.

---

## Summary (ideal for an interview)

> `extends` **is a way to inherit one component from another in the Options API.**
> **The child component receives all the parent's options (data, methods, computed, hooks).**
> **On a name conflict, the child component wins.**
> **In Vue 3 it's rarely used, since the Composition API replaces it.**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts400 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.