How to use vnode in vue template - vue.js

Question

I want to call the dialog like this:
import demo from './demo.vue';
methods: {
open() {
const dialog = this.$dialog({
content: demo
});
}
}
dialog.js
import Vue from 'vue';
import QfDialog from './qf-dialog';
import ElementQfUI from 'element-qf-ui';
Vue.use(ElementQfUI);
let DialogConstructor = Vue.extend(QfDialog);
export const dialog = (params) => {
const instance = new DialogConstructor({
propsData: {
visible: true,
...params
}
});
instance.$mount();
document.body.appendChild(instance.$el);
return instance;
}
Vue.prototype.$dialog = dialog;
I tried to generate a VNode from a vue object to use in the template, but it gives me following error:
Error in render: "TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
--- property '_renderProxy' closes the circle"
<template>
<el-dialog :visible.sync="visible" v-bind="$attrs" v-on="$listeners">
{{ contentTpl }}
</el-dialog>
</template>
<script>
export default {
name: 'qf-dialog',
props: {
visible: {
type: Boolean,
default: false
}
},
data() {
return {
contentTpl: null
};
},
created() {
// this.content is a vue obj
let content = JSON.parse(JSON.stringify(this.content));
let vnode = this.$createElement('demo-cc', content);
this.contentTpl = [vnode];
}
};
</script>
How do I make {{contentTpl}} work ?

Answer 1

You are passing a whole Vue component into your Dialog - not a VNodes
Just use Dynamic Components
<template>
<el-dialog :visible.sync="visible" v-bind="$attrs" v-on="$listeners">
<component :is="content" />
</el-dialog>
</template>
Note that using :visible.sync is problematic as Vue does not allow to modify props the component receives