Почему теги стиля не разрешены в шаблоне Vue, но разрешены в файле .vue?

Мне не удалось найти ссылку на него в документации, но Vue, похоже, автоматически удалите теги <style> в своем шаблоне. Например, если у вас есть компонент в .js файле, например ...

export default {
   template: (
      `<section>
         <style scoped>
            header { color: blue; }
         </style>
         <header>Hello!</header>
         ...
      </section>`
   ),
   // data, methods, etc.
};

... тогда ваш заголовок не будет синим; стиль исчезнет с предупреждением "Tags with side effect (<script> and <style>) are ignored in client component templates."

Тем не менее, если вы используете .vue файл и vue cli, вам обычно рекомендуется иметь три раздела - <style scoped> для вашего CSS, <script> для вашего JavaScript и <template> для вашего HTML-шаблона.

Если нет другого (недокументированного?) Способа установить стиль с помощью параметров конфигурации компонента, существуют две разные парадигмы - одна для компонента в js и одна для компонентов vue. Почему это? Есть ли другой способ для пользователей, не использующих vue-cli, добавить стили с компонентной областью в свое приложение vue?


javascript vue.js css vuejs3
person Luke    schedule 12.10.2020    source источник
comment
Наверное, дело в безопасности. Оба подлежат инъекции.   -  person isherwood    schedule 12.10.2020
comment
Выполнение этого в строке шаблона потребует, чтобы компилятор шаблона был значительно сложнее, чем он есть. Есть ли другой способ для пользователей, не использующих vue-cli, добавить стили с компонентной областью в свое приложение vue? - см. stackoverflow.com/questions/42765262/.   -  person Estus Flask    schedule 13.10.2020
comment
Другой способ - передать область видимости загрузчику модуля CSS и использовать сгенерированные имена классов как :className="importedClassName", см. webpack.js.org/loaders/css-loader/#scope. Вот как это обычно делается в React, medium.com/@0n3z3r0n3/   -  person Estus Flask    schedule 13.10.2020

Ответы (1)


arrow_upward
0
arrow_downward

Причина в том, что существует два разных пути для рендеринга контента: предварительно скомпилированный и скомпилированный во время выполнения.

Когда вы используете CLI для компиляции SFC (однофайловый компонент или .vue файл), компилятор при необходимости сгенерирует соответствующий файл (ы) css. Он также преобразует содержимое шаблона в код JavaScript, поэтому код шаблона HTML компилируется, а рендеринг обрабатывается с помощью сгенерированного пакета js.

С другой стороны, если вы полагаетесь на vue для компиляции вашего шаблона во время выполнения, то компиляция css не поддерживается по нескольким причинам, таким как необходимость дополнительных зависимостей и невозможность сгенерировать файл css, что может привести к инъекциям css неоднозначный.

Если вы хотите иметь возможность вводить CSS на страницу, ничто не мешает вам ввести CSS вручную. Вы можете сделать это, определив <template> (или другой тег), который будет содержать стиль, а затем вы можете заставить компонент вводить идентификатор области действия перед каждым селектором, а затем вставлять скрипт в html. Это не готовое решение, и может потребоваться некоторая работа для надежной обработки всех селекторов, но это возможно.

person Daniel    schedule 12.10.2020