3.0.0 • Published 11 months ago
vue-insert-component v3.0.0
Insert Vue component into root component for Vue 3.
English | 简体中文
insertComponent(App, ContainerComponent?)
App
component must include default slot.
App.vue:
<template>
<div></div>
<slot /> <!-- must use default slot -->
</template>
$insert(options, ContainerComponent?)
options.component
{Component}
required.options.props
{object}
Merge tooptions.component
's props.options.callback(...args1)
{function}
When exec$pluck(...args2)
this function will be fired. Theargs1
is fromargs2
Usage
import { createApp } from 'vue'
import insertComponent from 'vue-insert-component'
import App from './App.vue'
createApp(insertComponent(App)).mount('#app')
Foo.vue component:
<template>
<button @click="add">insert DialogForm to root component</button>
</template>
<script>
import { defineComponent } from 'vue'
import DialogForm from './DialogForm.vue'
export default defineComponent({
methods: {
add() {
this.$insert({
component: DialogForm,
props: {
name: 'Vue'
},
callback(a, b) {
console.log(a, b) // hi, Vue
}
})
}
}
})
</script>
DialogForm.vue component:
<template>
<button @click="remove">remove this component from root component</button>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
props: {
name: String
},
methods: {
remove() {
this.$pluck('hi', this.name)
}
}
})
</script>
Composition API
<template>
<button @click="onAdd">insert DialogForm to root component</button>
</template>
<script setup>
import { useInsert } from 'vue-insert-component'
import DialogForm from './DialogForm.vue'
function onAdd() {
useInsert({
component: DialogForm,
props: {
name: 'Vue'
},
callback(a, b) {
console.log(a, b) // hi, Vue
}
})
}
</script>
DialogForm.vue component:
<template>
<button @click="onClose">remove this component from root component</button>
</template>
<script setup>
import { usePluck } from 'vue-insert-component'
const pluck = usePluck()
function onClose() {
pluck('hi', 'vue')
}
</script>
3.0.0
11 months ago
2.3.0
11 months ago
2.4.1
11 months ago
2.4.0
11 months ago
2.4.2
11 months ago
2.3.0-beta8
2 years ago
2.3.0-beta9
2 years ago
2.3.0-beta4
2 years ago
2.3.0-beta5
2 years ago
2.3.0-beta6
2 years ago
2.3.0-beta7
2 years ago
2.3.0-beta1
2 years ago
2.3.0-beta2
2 years ago
2.3.0-beta3
2 years ago
2.2.1
2 years ago
2.2.0
2 years ago
2.1.0
2 years ago
2.0.0
2 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago