Home » vue » Are component tags always empty?

Are component tags always empty?

Posted by: admin November 26, 2021 Leave a comment

Questions:

Regarding template parsing, the documentation says:

Although in simple cases it might appear to work, you can not rely on
custom elements being expanded before browser validation. E.g.
<my-select><option>...</option></my-select> is not a valid template
even if my-select component eventually expands to
<select>...</select>.

That made me wonder: is there any case in which it is useful to have content between the opening and closing tags of a custom element? It seems to me that such content is thrown away. Maybe something in the beforeCompile code?

Answers:

You can get the contents in your component by using the <slot> element. See the docs for more information.

BTW, that warning only applies to Vue 1.0. In the upcoming 2.0 release, templates will be compiled outside of the DOM, so custom elements will always be expanded before browser validation.

###

It’s not thrown away. As Joseph said, you can insert it with <slot> You just have to make sure you don’t create an invalid HTML structure.

You can use the is attribute to handle situations where you need to use an invalid HTML structure with a component. This happens a lot with tables, you would use:

<table>
  <tr is="my-component">

Instead of

<table>
  <my-component>

To ensure your code is HTML compliant