javascript 注册该组件时如何为 vue.js 组件定义 css 样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49053882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to define css styles for a vue.js component when registering that component?
提问by Stefan
I am able to register a custom vue.js component with
我可以注册一个自定义的 vue.js 组件
// register
Vue.component('my-component', {
template: '<div class="my-class">A custom component!</div>'
})
Also see https://vuejs.org/v2/guide/components.html
另见https://vuejs.org/v2/guide/components.html
How can I include css classes for my component?
如何为我的组件包含 css 类？
I would expect something like
我希望像
Vue.component('my-component', {
template: '<div class="my-class">A custom component!</div>',
css: '#... my css stylesheet...'
})
but there does not seem to be a cssoption.
但似乎没有css选择。
I know that I could
我知道我可以
a) define all css classes in a global css stylesheet or
a) 在全局 css 样式表中定义所有 css 类或
b) use singe-file-vue-components (would require build tool supporing *.vue files, see https://vuejs.org/v2/guide/single-file-components.html)
b) 使用 singe-file-vue-components（需要构建工具支持 *.vue 文件，请参阅https://vuejs.org/v2/guide/single-file-components.html）
but I would prefer to
但我更愿意
c) specify a css stylesheet for the component when registering the component.
c) 在注册组件时为组件指定一个 css 样式表。
=> How to do so?
=> 怎么做？
采纳答案by Roy J
there does not seem to be a css option.
似乎没有 css 选项。
That is correct. You cannot do what you describe. The documentation on single file componentsis pretty clear that one of the advantages is that you can do this with them and cannot do it without them.
那是对的。你不能做你所描述的。关于单文件组件的文档非常清楚，优点之一是你可以用它们来做这件事，没有它们就不能做。
In many Vue projects, global components will be defined using
Vue.component, followed bynew Vue({ el: '#container' })to target a container element in the body of every page.This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views. In more complex projects however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent:
[...] No CSS supportmeans that while HTML and JavaScript are modularized into components, CSS is conspicuously left out
在许多 Vue 项目中，全局组件将使用 定义
Vue.component，然后new Vue({ el: '#container' })在每个页面的正文中定位一个容器元素。这对于中小型项目非常有效，其中 JavaScript 仅用于增强某些视图。然而，在更复杂的项目中，或者当你的前端完全由 JavaScript 驱动时，这些缺点变得明显：
[...] 不支持 CSS意味着虽然 HTML 和 JavaScript 被模块化为组件，但 CSS 明显被排除在外
回答by ken
Its true that you cannot add <style>inside a Vue template or add CSS within
component directly, unless you bind it or define your css globally. But you can create a custom component that will dynamically do it for you. sample
确实，您不能<style>在 Vue 模板中添加或直接在组件中添加 CSS，除非您绑定它或全局定义您的 css。但是您可以创建一个自定义组件来动态地为您执行此操作。样本
回答by smallscript
Keep in mind that Vuecomponents are effectivelymacros.
请记住，Vue组件实际上是宏。
Where renderis the substitution function, and the vueDefinition(defn3below) is effectively a classfor the given tagName.
哪里render是替代函数，对于给定的，vueDefinition（defn3下面）实际上是 a 。classtagName
A templateis just a convenient syntactic-sugarshorthand that will be compiled(with some vue-usage pattern restrictions)into a renderfunctionif you don't provide your own renderfunction.
一个template仅仅是一个方便的语法糖的简写，这将是compiled（有一些VUE-使用模式限制）到render功能，如果你不提供自己的render功能。
const defn3 = {
tagName: 'ae-css',
mounted() {
const vueDefinition = this.$options;
this.$el.appendChild(document.createTextNode(vueDefinition.css));
},
css: `
* {
color: blue;
}
`,
render(h) {
return h('style');
}
}
Vue.component(defn3.tagName, defn3);
With that solutionin hand, there are a number of good reasons why you probably don't want something as simplistic as what I just provided.
有了这个解决方案，有很多很好的理由说明为什么您可能不想要像我刚刚提供的那样简单的东西。
Namely, you want to have your cssmodularizedsuch that it does not affect any aspects of your page you did not intend it to. For that, you either need carefully designed cssrules with your intended inheritance and scope; probably using a class=... But a better approach would be to just use Vue's facilities that offer similar capabilities automatically.
也就是说，你想让你的css模块化，这样它就不会影响你不想要的页面的任何方面。为此，您要么需要精心设计具有预期继承和范围的css规则；可能使用一个class=... 但更好的方法是使用 Vue 的自动提供类似功能的工具。
If you want to use modern browser architecture capabilities for this, then you might want your components to be real browser DOM WebComponentsthat make use of the shadowDOMand keep your internal elements and styles encapsulated within a shadowRoot. See this library, for doing that in Vue.
如果您想为此使用现代浏览器架构功能，那么您可能希望您的组件是真正的浏览器 DOM WebComponents，使用shadowDOM并将您的内部元素和样式封装在shadowRoot. 请参阅此库，以便在Vue 中执行此操作。
回答by Talha
Here is an answer all the way from Pakistan :)
这是来自巴基斯坦的答案:)
export const ContactUs = Vue.component(
'mycomponent-contact-us'
,{
props: {
backgroundColor: {
type: String
,required: false
,default: "red"
}
}
,data: function(){
return {
}
}
,template: `
<div>
<span class='contact_us_text' >Contact Us Component and its bg color will be {{backgroundColor}}</span>
</div>
`
,mounted: function(){
var css_text = `
.contact_us_text{
color: `+this.backgroundColor+`;
}
`;
var css = document.createElement('style');
css.type='text/css';
css.setAttributeNode( document.createAttribute('scopped') );
css.appendChild( document.createTextNode( css_text ) );
this.$el.appendChild( css );
}
}
);
);
回答by Ferkze
You can embed a style tag within your template root element:
您可以在模板根元素中嵌入样式标签：
Vue.component('my-component', {
template: `
<div class="my-class">
A custom component!
<style>
// ... my css stylesheet...
</style>
</div>
`
})
