Nested components in Vue.js 2

Question

I'm being using Vue.js for some months and it's have been reminding the webforms paradigm, that you used components to make a website or webapp, but with Vue.js it's a pleasure to create such things and not a whole nightmare it was with webforms.

Well, my question is if it's possible making nested components just to define some behavior on it's parent on a markup-way. Example:

<grid prop1="somevalue" prop2="somevalue">
  <grid-column prop1="somevalue" prop2="somevalue">
    <filter-options prop1="somevalue" prop2="somevalue">
    </filter-options>
  </grid-column>
</grid>

So, a particular grid component have column and the column hava a filter options.

Don't want to depend stricty to the javascript code.

Thanks in advance

EDIT: Just to add that the childs-component must not have a template. They are just to pass some props to the parent.

Yeah it's possible. Is something not working as you would expect it to? — thanksd
– thanksd, Commented Oct 10, 2017 at 15:31
Yes, have a look at the "slot" concept in Vue.JS: vuejs.org/v2/guide/… — cello
– cello, Commented Oct 10, 2017 at 15:37
Well, and if you don't want the childs-compoents to have a template, well you could make their render function return null.Take the example, on the grid you put it a slot, and have to put some slot in the grid-column component to render the filter-options component, but how if the render function of the grid-column returns null? — Nuno
– Nuno, Commented Oct 10, 2017 at 15:47

Eric G · Accepted Answer · 2017-10-10 16:46:22Z

1

To answer your question

if it's possible making nested components just to define some behavior on it's parent on a markup-way

And to keep in mind your request:

Don't want to depend strictly to the JavaScript code.

The answer is no, it is not possible. Components underneath the parent can only push (emit) data to the parent after the DOM loads. So you would need to push a value that would trigger some JavaScript if you wanted to alter the html. Using JavaScript would be the only method though.

To achieve what you are asking I think it makes a lot more sense to use props on the parent component. You have a lot more flexibility and you can make it very versatile.

answered Oct 10, 2017 at 16:46

Eric G

2,6271 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested components in Vue.js 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related