vue стили scoped для дочерних компонентов
  • 896

Как в Vue компоненте указать локальные scoped стили c видимостью в дочерних компонентах.

Автор: admin | 24 ноября (Сб.) 2018г. в 21ч.28м.

В файле компонента стили элементов можно прописать в блоке <style></style>
Тогда стили будут видны глобально и будут влиять на всю разметку html. Если нужно изолировать стили, чтобы они были доступны только в текущем компоненте, то нужно добавить <style scoped> и стили не будут влиять на код вне компонента.
// Parent.vue //
<template>
  <div class="example">Текст ...</div>
</template>

<script>
  export default {
    name: 'Parent',
    data() {
      return {
        message: 'parent'
      }
    }
  };
</script>

//Local styles
<style scoped>
  .example {
    font-size: 20px;
    color: blue;
  }
</style>​

Как передавать стили дочерним компонентам.

Но иногда нужно сделать стили частично локальными, которые будут видны не только в самом компоненте, где они прописаны, но и в его дочерних компонентах. Сделать это просто.
Нужно добавить / deep / selector в начало вашего оператора селектора в стилях.
<style scoped>
    /deep/ h1{
        color: red;
    }
</style>​
Теперь в дочернем компоненте будет h1 тег с текстом красного цвета.

Пример вложенных компонентов и стилей scoped /deep/

Родительский компонент Parent.vue:
// Parent.vue //
<template>
  <Dother/>
  <div class="example">Текст ...</div>
</template>

<script>
  import Dother from './Dother'

  export default {
    name: 'Parent',
    components: {
        Dother
    }
    
  };
</script>

//Local styles
<style scoped>
  h1 {
    /deep/ color: red;
  }
</style>​​
Дочерний компонент встраивается в шаблон родителя <Dother/> С помощью /deep/ стиль цвета h1 прописанный в родителе виден во вложенном компоненте.

Дочерний компонент Dother.vue, вызываемый в родительском:
<template>
    <div>
        <h1>Home</h1>
    </div>   
</template>

<script>
export default {
  data() {
    return {}
  }  
};
</script>

<style scoped>
    h1{
        font-size: 23px;
    }
    
</style>​

Приветствую!

Меня зовут Сергей. Я - автор этого блога.

Если Вам был полезен материал на моем сайте, поддержите пожалуйста мой проект, чтобы о нем узнали другие люди - кликните plizz :) на иконку в соц. сети, чтобы поделиться материалом с другими.