vue-component-component
Vue version of @Reach/component-component.
A dynamic version of Vue.Component, a component component if you will. Useful for inline lifecycles and state. It's also incredibly composable.
Example
A Todo App:
<vue-component :initial-state="{ newTodo: 'work', items:[]}">
<div slot-scope="{ state }">
What to do?:
<input type="text" ref="inp" v-model="state.newTodo">
<button
@click="()=>{
state.items.push(state.newTodo)
state.newTodo = '';
$refs.inp.focus();
}"
>Add</button>
<br>
<ul>
<li :key="item" v-for="item in state.items">{{item}}</li>
</ul>
</div>
</vue-component>
More Examples on Codesandbox.
Install
npm install vue-component-component
or
yarn add vue-component-component
Usage
Register the component locally and use it (recommended)
import Component from "vue-component-component";
export default {
components: {
// ⚠️ `<component>` tag is reserved by vue
"vue-component": Component
}
};
Or register the component globally in main.js
import Component from "vue-component-component";
Vue.component("vue-component", Component);
Browser usage:
<!-- vue-component-component JavaScript -->
<script src="https://unpkg.com/vue-component-component"></script>
<!-- use -->
<script>
Vue.component('vue-component', VueComponent)
new Vue({
el: '#app'
})
</script>
Props
Name | Type | Default | Description |
---|---|---|---|
initialState | object |
{} |
initial state aka data: ()=> ({}) |
created | Function |
- | Called when the component is created. |
mounted | Function |
- | Called when the component is mounted. |
All other Life Cycle Hooks | Function |
- | "beforeMount", "mounted", "beforeUpdate", "updated", "activated", "deactivated", "beforeDestroy","destroyed" |
Scoped Slots
Name | Description |
---|---|
default |
Here the content will be rendered. |
Slot Properties and Function Args
All the life cycle hooks(mounted, created etc.) and the default slot scope gets the args/props below.
Property | Type | Description |
---|---|---|
state |
Object |
State of the component a.k.a data |
setState |
Function |
A function to set the state |
About
Inspired by @Reach/component-component. Thanks Ryan 👍
Todos
- Refs?
Author
vue-component-component © koca, Released under the MIT License.
Authored and maintained by koca with help from contributors (list).
mesutkoca.com · GitHub @koca · Twitter @imesutkoca