CODEWITHSUNDEEP
vue.jsvuejs2
Nuno
Nuno

Reputation: 27

Nested components in Vue.js 2

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.

Upvotes: 1

Views: 336

Answers (1)

Eric G
Eric G

Reputation: 2617

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.

Upvotes: 1

Related Questions