Use of '<style scoped>' in Nuxt.js (SPA)

穿精又带淫゛_ 提交于 2021-02-19 06:09:54

问题


I start the project with nuxt.js / express.

We have developed style scoped for each component (.vue) in nuxt.js. So, when routing , the property is overlaid on the same class name (style), so the page does not display properly.

1. What is the correct use of 'style scoped'?

2. Or should the routing process be <a> rather than <nuxt-link>?


回答1:


  1. What is the correct use of 'style scoped'?

The <style scoped></style> notation is not ambiguous, as the scoped attribute suggests, all the CSS elements defined within this scope apply only to the current component. If the CSS element exists globally, the scoped one -having the same name and type- takes precedence, that is, it overrides the globally defined CSS element.

For example, let us define in /components folder 3 components Component1.vue, Component2.vue, Component3.vue:

Component1.vue:

<template>                                                                                                                                             
  <div class="yellow-text">Component 1</div>                                                                                                           
</template>                                                                                                                                            

<script>                                                                                                                                               
export default {                                                                                                                                       
  name: 'Component1'                                                                                                                                   
}                                                                                                                                                      
</script>  
<style>
.yellow-text {
  color: yellow;
}
</style>   

Component2.vue:

<template>                                                                                                                                             
  <div class="yellow-text">Component 2</div>                                                                                                           
</template>                                                                                                                                            

<script>                                                                                                                                               
export default {                                                                                                                                       
  name: 'Component2'                                                                                                                                   
}                                                                                                                                                      
</script>  
<style scoped>
.yellow-text {
  color: red;
}
</style>             

Component3.vue:

<template>                                                                                                                                             
  <div class="yellow-text">Component 3</div>                                                                                                           
</template>                                                                                                                                            

<script>                                                                                                                                               
export default {                                                                                                                                       
  name: 'Component3'                                                                                                                                   
}                                                                                                                                                      
</script>  
  • In Component1.vue, the text will be displayed in yellow.
  • In Component2.vue, the text will be displayed in red because the scoped CSS class takes precedence over the globally defined one in Component1.vue.
  • In Component3.vue, the text will be displayed in yellow.

So to respond to your question: there is no correct way because there is only one way to do that, and the meaning is not subject to any form of interpretation.

  1. Or should the routing process be rather than ?

Even if <nuxt-link /> is rendered as <a href>, the documentation clearly states the former must be used to navigated through the Nuxt.js application and In the future, we will add features to the component, like pre-fetching on the background for improving the responsiveness of Nuxt.js Applications.



来源:https://stackoverflow.com/questions/44592158/use-of-style-scoped-in-nuxt-js-spa

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!