Vue造型局部组件

Posted 2023-02-27

我有一个单文件组件，我想把它用在不同的地方，比如订阅页和页脚，但我想让它的风格不同。

组件文件。Newsletter.vue

<template>
<form>
    <label>Enter your email address here</label>
      <input type="text" name="email" required/>
</form>
  <button @click="subscribe" >
    SUBSCRIBE
  </button>
</template>

订阅页面。Subscribe.vue

让我们说，风格通讯背景色为绿色，并向左对齐。

<template>
 <h2>
  Subscribe to receive Newsletter
  </h2>
  <Newsletter></Newsletter>
</template>

<script>
import Newsletter from "@/components/Newsletter.vue";

export default 
 components: 
  Newsletter
 

</script>

<style scoped>
 Newsletter
  background-color: green;
  text-align:left;
 
</style>

订阅页面。页脚.vue

但在Footer中，我想将Newsletter的背景色改为红色，并对齐中心。

   <template>
      <h2>
        JOIN OUR NEWSLETTER
      </h2>
      <Newsletter></Newsletter>
   </template>

<script scoped>
import Newsletter from "@/components/Newsletter.vue";

export default 
 components: 
  Newsletter
 

</script>

<style>
 Newsletter
  background-color: red;
  text-align:center;
 
</style>

答案

有很多选择。您可能会受益于使用 ::v-deep 组合器，允许将样式泄露给子组件。

用你的例子做一个小改动。

<template>
 <h2>
  Subscribe to receive Newsletter
  </h2>
  <Newsletter class="newsletter"></Newsletter>
</template>

<script>
import Newsletter from "@/components/Newsletter.vue";

export default 
 components: 
  Newsletter
 

</script>

<!-- this is the change. Updated to have `::v-deep` to allow style to "leak" to the child component -->
<style scoped>
 ::v-deep .newsletter 
  background-color: green;
  text-align:left;
 
</style>

查看更多内容：

https:/vue-loader.vuejs.orgguidescoped-css.html#deep-selectors。

另一个可以考虑的方案是使用全局样式代替本地样式，并确保每个共享类元素有一个唯一的父元素。

在一个组件中，如Subscribe:

<style lang="scss">
 .subscribe  
  .newsletter 
   // style for this specific version of newsletter
  

</style>

在另一个组件中，".somethingelse "应该是组件的特定类型。

<style lang="scss">
 .somethingelse 
   .newsletter 
     // style for this other specific version of newsletter
   
 
</style>

更多关于全局特定性的信息。

https:/developer.mozilla.orgen-USdocsWebCSSSpecificity）。

另一答案

这是有可能的! 你所要做的就是在上面添加 scoped 属性到样式标签.

下面是文档中的片段，在此供参考。

<template>
  <button class="btn btn-close">X</button>
</template>

<style scoped>
.btn-close 
  background-color: red;

</style>

这将只在本地应用样式，应用到包含样式标签的组件。但请记住，你真的应该避免使用标签选择器，因为它们是最通用的。更好的做法是使用类选择器，因为它有更高的特异性，这意味着它被过度编写的可能性更小（id选择器或内联样式优先）。我建议这样做。

<template>
 <h2>
  Subscribe to receive Newsletter
  </h2>
  <Newsletter class="newsletter"></Newsletter>
</template>

<script>
import Newsletter from "@/components/Newsletter.vue";

export default 
 components: 
  Newsletter
 

</script>

<style scoped>
 .newsletter 
  background-color: green;
  text-align:left;
 
</style>

在上面的例子中 newsletter 类将使背景色为绿色 只是 在这个单档组件中。