It may not be possible to achieve this using a dynamic component, but you can use a render function instead.
Let's consider a modified data structure based on your original one.
modules: [
{
name: 'some-thing',
props: {
color: '#0f0',
text: 'some text',
},
sync:{
"volume": "volume"
},
on:{
loaded: "handleLoaded"
}
},
{
name: 'other-thing',
on:{
clicked: "onClicked"
}
},
],
In this updated structure, I've included two additional properties: sync and on. The sync property contains the properties you want to synchronize. For instance, the sync property for one component includes volume: "volume", which would typically translate to :volume.sync="volume". While dynamically adding this to a dynamic component might not be straightforward, in a render function, you could deconstruct it into its components and add a property with an updated:volume handler.
Similarly, the on property in a render function allows you to attach event handlers identified by keys that call corresponding methods specified in the values. Below is a potential implementation of such a render function.
render(h){
let components = []
let modules = Object.assign({}, this.modules)
for (let template of this.modules) {
let def = {on:{}, props:{}}
if (template.props){
def.props = template.props
}
if (template.sync){
for (let sync of Object.keys(template.sync)){
def.on[`update:${sync}`] = val => this[sync] = val
def.props[sync] = this[template.sync[sync]]
}
}
if (template.on){
for (let handler of Object.keys(template.on)){
def.on[handler] = this[template.on[handler]]
}
}
components.push(h(template.name, def))
}
return h('div', components)
}
The render method essentially goes through the properties in the template within your modules array to determine how to render the component. It passes along ordinary properties, breaks down sync properties into their constituent parts, and adds appropriate event handlers for on properties.
Here's a working example of this concept.
console.clear()
Vue.component("some-thing", {
props: ["volume","text","color"],
template: `
// Template code here...
`
})
Vue.component("other-thing", {
template: `
// Template code here...
`
})
new Vue({
el: "#app",
data: {
modules: [{
name: 'some-thing',
props: {
color: '#0f0',
text: 'some text',
},
sync: {
"volume": "volume"
},
on: {
loaded: "handleLoaded"
}
},
{
name: 'other-thing',
on: {
clicked: "onClicked"
}
},
],
volume: "stuff"
},
methods: {
// Methods defined here...
},
render(h) {
let components = []
let modules = Object.assign({}, this.modules)
for (let template of this.modules) {
let def = {
on: {},
props: {}
}
if (template.props) {
def.props = template.props
}
if (template.sync) {
for (let sync of Object.keys(template.sync)) {
// Method implementation...
}
if (template.on) {
for (let handler of Object.keys(template.on)) {
// Event handling logic...
}
}
components.push(h(template.name, def))
}
return h('div', components)
},
})
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a0c0f1f3a485448544c">[email protected]</a>/dist/vue.js"></script>
<div id="app"></div>