https://github.com/en96321/vue-inheritance
vue-inheritance
https://github.com/en96321/vue-inheritance
extend implement inheritance vue vue3
Last synced: 4 months ago
JSON representation
vue-inheritance
- Host: GitHub
- URL: https://github.com/en96321/vue-inheritance
- Owner: en96321
- License: mit
- Created: 2023-12-12T06:36:38.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-25T03:34:36.000Z (over 1 year ago)
- Last Synced: 2025-08-09T18:45:48.718Z (10 months ago)
- Topics: extend, implement, inheritance, vue, vue3
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/vue-inheritance
- Size: 94.7 KB
- Stars: 17
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Inheritance
### Introduction
vue-inheritance is an npm package designed for Vue.js projects. It provides a convenient way to manage and reuse component properties and methods. Leveraging Vue's extension and mixin capabilities, this package simplifies the definition and application of component attributes, making it more modular.
**Installation**
install vue-inheritance using the following command:
```bash
npm install vue-inheritance
```
**Usage**
In your Vue project, import VueInheritance:
```
import { VueInheritance } from 'vue-inheritance'
```
**Define Interface Modules**
Define one or more props, methods, computed modules.
```javascript
// IControl
export const IControl = {
props: {
disabled: {
type: Boolean,
default: false
}
}
}
// ITheme
export const ITheme = {
props: {
theme: {
type: String,
default: 'Standard'
}
}
}
// ILoading
export const ILoading = {
props: {
isLoading: {
type: Boolean,
default: false
}
}
}
// IButton
export const IButton = {
extends: VueInheritance.implement(IControl).implement(ITheme)
props: {
size: {
type: String,
default: 'lg'
}
},
methods: {
}
}
```
**Implement**
In your specific component, use the VueInheritance implement method to apply Interface modules.
```javascript
// Button.vue
export default {
extends: VueInheritance.implement(IControl).implement(ITheme),
methods: {
onClick(e) {
this.$emit('click', e)
}
}
}
// or
export default {
extends: IButton
}
```
**Extend**
In another component, use the extend method to inherit an existing component and the implement method to apply additional attribute modules.
```javascript
// LoadingButton.vue
import Button from './Button.vue'
export default {
extends: VueInheritance.extend(Button).implement(ILoading)
}
```
**Examples**
Button with IControl and ITheme
```vue
Click me
import { VueInheritance } from 'vue-inheritance'
import { IControl } from '@/core/IControl.js'
import { ITheme } from '@/core/ITheme.js'
export default {
extends: VueInheritance.implement(IControl).implement(ITheme),
methods: {
onClick(e) {
this.$emit('click', e)
}
}
}
```
Loading Button with ILoading
```vue
Loading...
Click me
import { VueInheritance } from 'vue-inheritance'
import Button from './Button.vue'
import { ILoading } from '@/core/ILoading.js'
export default {
extends: VueInheritance.extend(Button).implement(ILoading)
}
```
This way, you can define interface modules based on project requirements and flexibly apply and reuse them in your components.