Adding a "v-all" directive

[iogrt]

What problem does this feature solve?

I have some components that I call view components, all they do is import the child components that they want / don't want. Since these components are used by different views. I want to share all the component options between them.

The way I'm thinking of doing this is having "v-bind" and "v-on" objects that I get from a js file, this way all views can have the same "component options". But having to write v-bind, v-on and potentially "ref" and v-if cause a bit of boilerplate and aren't ideal. (Plus the view has to know what options the component has)

I understand my issue may be a bit of an edge case and would love to build a custom directive for my needs. But afaik custom directives don't have the power of providing short-hands.

What does the proposed API look like?

v-all would be a directive that would take in an object with all the directives. Just like v-bind does with props
Examples:

• <myComponent v-all="{bind: { text:"Lorem Ipsum"}} /> ==== <myComponent text="Lorem Ipsum" />
• <myComponent v-all="{listeners: {click: click()}} /> === <myComponent @click="click" />
• <myComponent v-all="{if: (this.active)}} /> === <myComponent v-if="active" />

[Justineo]

You can use render functions for this case. There's no need to introduce another custom micro-syntax into the template.

[iogrt]

Sorry for commenting on a closed issue, but I've been finding this more and more useful, the disavantage of render functions is that I'd have to transform a whole component to render functions (which are harder to read imo).

Here's a big example on why I want to use them: Scoped slots

<template>
  <MainStage slot-scope="{ textDisplayEvents }" >
     <h1> My title </h1>
      <Chunk>
        <template #left slot-scope="{ props, events}">
          <TextDisplay v-bind="props" v-on="{ ...events, ...textDisplayEvents }" />
	</template>
		
	<template #right slot-scope="{ props, events}">
	   <OtherComponent v-bind="props" />
	</template>
       </Chunk>
  </MainStage>
</template>

With "v-all" (I know it's a bad name, can't think of anything better)

<template>
  <MainStage slot-scope="{ textDisplayBind }" >
     <h1> My title </h1>
      <Chunk>
        <template #left slot-scope="chunkBind">
          <TextDisplay v-all="lodashMerge(chunkBind, textDisplayBind)" />
	</template>
		
	<template #right slot-scope="chunkBind">
	   <OtherComponent v-all="chunkBind" />
	</template>
       </Chunk>
  </MainStage>
</template>

This seems over-engineered due to being reduced, but the idea is that there are different "Stage" views and with this I can keep all the common logic in one place and keep code DRY. (i got the idea from here)

This is the best way I found of having various views having general logic consistency. If you know of something else, please add your input

My proposal is more than just syntax sugar, this is the components not having the knowledge if there are events, props, or both!

( lodashMerge wouldn't be needed with this feature #9718 )