Hi,
I want to extend a custom dialog component with a slot for its content.
Therefore I have created this DialogWithSlot.vue:
<template>
<q-dialog v-model="visible">
<q-card>
<q-card-section>
<div class="text-h6">Title</div>
</q-card-section>
<q-card-section class="q-pt-none">
<slot></slot>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="OK" color="primary" v-close-popup/>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script>
export default {
name: 'DialogWithSlot',
data() {
return {
visible: false
}
},
methods: {
showMessage() {
this.visible = true
}
}
}
</script>
Using this dialog can be done using
<template>
<q-page class="flex flex-center">
<!--
This dialog 'dialog-with-slot' approach works, but I want to move it to a seperate component
-->
<q-btn label="dialog with slot works" @click="openMessage('this is a message')"/>
<dialog-with-slot ref="dlg">{{message}}</dialog-with-slot>
</q-page>
</template>
<script>
import DialogWithSlot from 'components/DialogWithSlot.vue'
export default {
name: 'PageInput',
data() {
return {
message: false
}
},
methods: {
openMessage(msg) {
this.message = msg
this.$refs.dlg.showMessage()
}
},
components: {
DialogWithSlot
}
}
</script>
But now I want to have it in a seperated component file. So I have created this DialogWithSlotImpl.vue:
<template>
<dialog-with-slot>{{messageProp}}</dialog-with-slot>
</template>
<script>
import DialogWithSlot from 'components/DialogWithSlot.vue'
export default {
name: 'DialogWithSlotImpl',
extends: DialogWithSlot,
props: ['messageProp'],
data() {
return {}
},
components: {
DialogWithSlot
}
}
</script>
and use it like this:
<template>
<q-page class="flex flex-center">
<!--
This dialog 'dialog-with-slot-impl' approach don't work,
How can I access the method (showMessage())
-->
<q-btn
label="dialog with slot impl don't work"
@click="openMessageImpl('this is yet another message')"
/>
<dialog-with-slot-impl ref="implDlg" :messageProp="message"/>
</q-page>
</template>
<script>
import DialogWithSlotImpl from 'components/DialogWithSlotImpl.vue'
export default {
name: 'PageInput',
data() {
return {
message: false
}
},
methods: {
openMessageImpl(msg) {
this.message = msg
this.$refs.implDlg.showMessage()
}
},
components: {
DialogWithSlotImpl
}
}
</script>
But this don’t work. The method showMessage() don’t get called.
A complete codesandbox can be found here.
https://codesandbox.io/s/extending-dialog-6mniu
Somebody any idea’s