Познакомить вас с принципами области действия, >>>, /deep/, ::v-deep

внешний интерфейс Element
Познакомить вас с принципами области действия, >>>, /deep/, ::v-deep

Мало знаний, большой вызов! Эта статья участвует в "Необходимые знания для программистов«Творческая деятельность.

Эта статья также участвует "Проект "Звезда раскопок""  , чтобы выиграть творческие подарочные пакеты и бросить вызов творческим поощрениям

Live2D (1).png

предисловие

Когда мы используем сторонние плагины в обычных проектах разработки, мы должны использовать некоторые компоненты element-ui. Когда нам нужно изменить стиль, нам всегда нужно добавить селектор /deep/depth. Раньше я знал, как использую его, но я не знаю его принципа. Кроме того, в стиль каждого компонента обычно добавляется scoped, но конкретного его принципа я не знаю. Сегодня я возьму вас, чтобы понять и понять

1. Принципы ограниченного CSS

1.1 Разница

Давайте сначала посмотрим на отсутствие настроекScopedс настройкамиScopedв чем разница

нет настройкиScoped

<div class="login">登录</div>
<style>
.login {
    width: 100px;
    height: 100px
}
</style>

Результат после упаковки точно такой же, как и у нашего кода, разницы нет.

настраиватьScoped

<div class="login">登录</div>
<style scoped>
.login {
    width: 100px;
    height: 100px
}
</style>

Результат после упаковки отличается от нашего кода. следующим образом:

<div data-v-257dda99b class="login">登录</div>
<style scoped>
.login[data-v-257dda99b] {
    width: 100px;
    height: 100px
}
</style>

В приведенном выше примере нетрудно найти дополнительный атрибут data-v-hash, что означает добавление области действия, PostCSS добавляет уникальный динамический атрибут ко всем доменам в компоненте, а затем добавляет дополнительные селекторы CSS. Используется соответствующий селектор атрибутов. чтобы выбрать дом в компоненте.Этот подход заставляет стиль воздействовать только на дом, содержащий атрибут - внутренний дом компонента, чтобы стили между компонентами не загрязняли друг друга.

1.2 Принцип

Идея реализации стиля Vue Scoped CSS выглядит следующим образом:

  1. Создайте идентификатор для каждого экземпляра компонента (примечание: это экземпляр компонента, а не класс компонента), который может однозначно идентифицировать экземпляр компонента, который я называю идентификатором экземпляра компонента, именуемым идентификатором экземпляра и обозначаемым InstanceID. ;
  2. Добавьте атрибут label к элементу Dom, соответствующему каждой метке в шаблоне компонента (элемент Dom, соответствующий метке компонента, является корневым элементом компонента) в форматеdata-v-实例标识, пример:<div data-v-e0f690c0="" >;
  3. Стили с заданной областью для компонентов<style scoped>Наконец, селектор каждого селектора увеличивает селектор атрибута原选择器[data-v-实例标识], пример: предположим, что исходный селектор.cls #id > div, измененный селектор.cls #id > div[data-v-e0f690c0];

1.3 Особенности

  1. Область действия стиля компонента ограничена меткой самого компонента, то есть: внутри компонента включена корневая метка подкомпонента, но другие метки, кроме корневой метки подкомпонента, не включены; поэтому селектор CSS компонента не может быть выбран Элементы в дочерних компонентах и ​​компонентах-потомках (кроме корневого элемента дочернего компонента);

    Поскольку он добавляет селектор атрибута к последней селекторной ячейке селектора[data-v-实例标识], а селектор атрибутов может выбирать только теги в текущем шаблоне компонента, а для подкомпонентов только корневой элемент имеет атрибуты тегов, которые могут представлять подкомпоненты.data-v-子实例标识, и есть свойство знака, которое может представлять текущий компонент (родительский компонент)data-v-父实例标识, другие некорневые элементы дочернего компонента, только атрибут метки, который может представлять дочерний компонентdata-v-子实例标识;

  2. Если у рекурсивного компонента есть селектор потомков, селектор нарушит ограничение подкомпонента, упомянутое в функции 1, тем самым выбрав средний элемент рекурсивного подкомпонента;

    Причина: предположим, что стиль области действия рекурсивного компонента A имеет селекторы с селекторами-потомками.div p, то в каждой рекурсии будет создаваться новый экземпляр компонента для этой рекурсии, а также для экземпляра будет генерироваться соответствующий селектор.div p[data-v-当前递归组件实例的实例标识], для всех, кроме первого рекурсивного экземпляра рекурсивного компонента, хотяdiv p[data-v-当前递归组件实例的实例标识]не будет выбирать элементы p в экземплярах дочерних компонентов (экземплярах рекурсивных дочерних компонентов) (по особым причинам, описанным в функции 1), но выберет все элементы p в текущем экземпляре компонента, поскольку экземпляр родительского компонента (экземпляр рекурсивного родительского компонента ) имеет соответствующий элемент div;

2. Принцип >>>, /deep/, ::v-глубокий селектор

2.1 Пример

Пример, встречающийся в реальной разработке: когда мы разрабатываем страницу, использующую подкомпонент, если нам нужно изменить стиль подкомпонента в это время, но это не влияет на другие страницы, использующие стиль подкомпонента. Например:

Родительский компонент: Parent.vue

<template>
  <div class="parent" id="app">
    <h1>我是父组件</h1>
    <div class="gby">
      <p>我是一个段落</p>
    </div>

    <child></child>
  </div>
</template>

<style scoped>
  .parent {
    background-color: green;
  }

  .gby p {
    background-color: red;
  }
  // 把子组件的背景变成红色，原组件不变
  .child .dyx p {
    background-color: red;
  }
</style>

Дочерний компонент: Child.vue

<template>
    <div class="child">
        <h1>我是子组件</h1>
        <div class="dyx">
            <p>我是子组件的段落</p>
        </div>
    </div>
</template>

<style scoped>
    .child .dyx p {
        background-color: blue;
    }
</style>

Тогда мы обнаружим, что это не имеет никакого эффекта. Но если мы используем>>>,/deep/,::v-deepМожет быть реализован один из трех селекторов глубины. см. код:

<template>
  <div class="parent" id="app">
    <h1>我是父组件</h1>
    <div class="gby">
      <p>我是一个段落</p>
    </div>

    <child></child>
  </div>
</template>

<style scoped>
  .parent {
    background-color: green;
  }

  .gby p {
    background-color: red;
  }
  // 把子组件的背景变成红色，原组件不变
  ::v-deep .child .dyx p {
    background-color: red;
  }
</style>

2.2 Принцип

Если вы хотите, чтобы селектор в стиле области действия мог выбирать элементы в подгруппе или компоненте-потомке, мы можем использовать深度作用选择器, его можно записать тремя способами:

  • >>>, пример:.gby div >>> #dyx p
  • /deep/, пример:.gby div /deep/ #dyx pили.gby div/deep/ #dyx p
  • ::v-deep, пример:.gby div::v-deep #dyx pили.gby div::v-deep #dyx p

Его принцип в основном такой же, как у Scoped CSS, но третий шаг немного отличается (первые два шага одинаковы):

  1. Создайте идентификатор для каждого экземпляра компонента (примечание: это экземпляр компонента, а не класс компонента), который может однозначно идентифицировать компонент, я называю его идентификатором экземпляра, обозначаемым как InstanceID;
  2. Добавьте атрибут label к элементу Dom, соответствующему каждой метке в шаблоне компонента (элемент Dom, соответствующий метке компонента, является корневым элементом компонента) в форматеdata-v-实例标识, пример:<div data-v-e0f690c0="" >;
  3. Стили с заданной областью для компонентов<style scoped>Каждый селектор действия глубины, предшествующий блоку селектора, добавляет селектор атрибута.[data-v-实例标识], пример: предположим, что исходный селектор.cls #id >>> div, измененный селектор.cls #id[data-v-e0f690c0] div;

Поскольку Vue не добавляет селекторы атрибутов в ячейки селекторов за селекторами глубокого действия.[data-v-实例标识], поэтому следующий модуль селектора может выбирать элементы в дочерних компонентах и ​​компонентах-потомках;

Это конец этой статьи. Позвольте мне рассказать о моих личных привычках использования. Лично я предпочитаю использовать его.::v-deepУ этого селектора глубины все-таки наилучшая совместимость.Его уже кастрировали два других, поэтому я не решаюсь его использовать. Я тоже записал опыт питтинга, а заинтересованные друзья могут глянуть.Станет ли решение проблем (ям), с которыми сталкивается плагин sass, необходимым знанием для фронтенда?

Категории