Alternative node template syntax

[KjetilHaaheim]

Component node templates are currently based on nodeComponent property in the dataset. This proposition is to incorporate one or both of the following suggestions:

1. Node template by slot (#default or #named). This can prevent some prop drilling.

<flowy :nodes="items">
  <template v-slot:default="{ node }">
    <flow-item v-bind="node" />
  </template>
</flowy>

2. Component as data property:

<flowy :nodes="items" :node-component='$options.FlowItem' />

Both suggestions are compatible with multiple block types in same collection if neccessary.

[smickelbeard]

Either solution will work for me, node-component makes a bit more sense to myself

I was thinking of combining this with https://v3.vuejs.org/guide/composition-api-provide-inject.html on the switch to vue3 eventually. Should be straightforward to put this into a composable :)

[KjetilHaaheim]

Either solution will work for me, node-component makes a bit more sense to myself

Absolutely, I agree. The reasoning for using slot is to avoid prop-drilling. By having the node component "in the controller", one can manipulate and/or listen to it directly:

<flowy :nodes="items">
  <template v-slot:default="{ node }">
    <flow-item v-bind="node" @click='sayHello' />
  </template>
</flowy>

export default {
  methods: {
    sayHello() {
      alert("Hello world!")
    }
  }
}

[KjetilHaaheim]

#39

node-component currently implemented, no slots yet.