Всегда ли теги компонентов пусты?

Относительно синтаксического анализа шаблонов в документации говорится:

Хотя в простых случаях может показаться, что это работает, вы не можете полагаться на расширение пользовательских элементов до проверки браузера. Например. <my-select><option>...</option></my-select> не является допустимым шаблоном, даже если компонент my-select в конечном итоге расширяется до <select>...</select>.

Это заставило меня задуматься: есть ли случай, когда полезно иметь содержимое между открывающим и закрывающим тегами пользовательского элемента? Мне кажется, что такой контент выбрасывается. Может быть, что-то в коде beforeCompile?


vue.js vue-component
person Roy J    schedule 11.09.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете получить содержимое своего компонента, используя элемент <slot>. Дополнительные сведения см. в документации.

Кстати, это предупреждение относится только к Vue 1.0. В грядущей версии 2.0 шаблоны будут компилироваться вне DOM, поэтому пользовательские элементы всегда будут раскрываться перед проверкой в ​​браузере.

person Joseph Silber    schedule 11.09.2016

arrow_upward
1
arrow_downward

Его не выбрасывают. Как сказал Джозеф, вы можете вставить его с помощью <slot>. Вам просто нужно убедиться, что вы не создаете недопустимую структуру HTML.

Вы можете использовать атрибут is для обработки ситуаций, когда вам нужно использовать недопустимую структуру HTML с компонентом. Это часто происходит с таблицами, вы бы использовали:

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

Вместо

<table>
  <my-component>

Чтобы убедиться, что ваш код соответствует HTML

person Jeff    schedule 11.09.2016