So verwenden Sie das Gültigkeitsbereichsattribut von style in vue

In diesem Artikel wird hauptsächlich das bereichsbezogene Attribut der vorsichtigen Verwendung von Stilen in Vue vorgestellt. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf

Um den Stil in der Vue-Komponente zu privatisieren (modularisieren) und die globale Situation nicht zu verschmutzen, können Sie dem Stil-Tag das Bereichsattribut hinzufügen, um anzuzeigen, dass dies nur der Fall ist gehört zum aktuellen Moment, das ist ein sehr guter Schachzug, aber warum sollte man ihn mit Vorsicht genießen? Denn wenn wir den Stil öffentlicher Komponenten (Bibliotheken von Drittanbietern oder projektspezifische Komponenten) ändern müssen, verursacht der Gültigkeitsbereich häufig größere Schwierigkeiten und erfordert zusätzliche Komplexität.

Das Prinzip der flächendeckenden Umsetzung privatisierter Stile

Warum wird es Ihrer Meinung nach die Komplexität erhöhen? Beginnen wir also mit den Prinzipien der Modulimplementierung. Zur Vereinfachung der Benennung gehen wir davon aus, dass diese Art von Komponente als private Modulkomponente bezeichnet wird und andere Komponenten ohne Gültigkeitsbereich als allgemeine Modulkomponenten bezeichnet werden.

Bei der Betrachtung der DOM-Struktur haben wir festgestellt, dass Vue der DOM-Struktur und dem CSS-Stil eindeutige und sich nicht wiederholende Tags hinzufügt, um Einzigartigkeit sicherzustellen und den Zweck der Privatisierung und Modularisierung des Stils zu erreichen. Das konkrete Rendering-Ergebnis wird anhand eines Beispiels erläutert.

Schaltflächenkomponente einer öffentlichen Komponente

Eine Schaltfläche einer öffentlichen Komponente. Um den Stil zu modularisieren, fügen Sie ihr das bereichsbezogene Attribut

//button.vue
<template>
  <p class="button-warp">
    <button class="button">text</button>
  </p>
</template>
...
<style scoped>
  .button-warp{
    display:inline-block;
  }
  .button{
    padding: 5px 10px;
    font-size: 12px;
    border-radus: 2px;
  }
</style>

<🎜 hinzu >Durchsuchen Der HTML-Teil und der CSS-Teil, die von der vom Browser gerenderten Schaltflächenkomponente

Schaltflächenkomponente gerendert werden, sind jeweils:

<p data-v-2311c06a class="button-warp">
  <button data-v-2311c06a class="button">text</button>
</p>

.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}

Wie aus den obigen Wörtern ersichtlich ist, ist die Komponente mit der Bereichsattribut hinzugefügt. Um eine Modularisierung der Komponentenstile zu erreichen, wurden zwei Prozesse durchgeführt:

1. Fügen Sie ein sich nicht wiederholendes Datenattribut (in der Form: data-v-2311c06a) hinzu HTML-DOM-Knoten zur Darstellung der Einzigartigkeit von

2. Fügen Sie am Ende jedes CSS-Selektors (kompiliert und) einen Datenattributselektor der aktuellen Komponente hinzu (z. B. [data-v-2311c06a]). generierte CSS-Anweisung) ) zum Privatisieren von Stilen

Jeder weiß, dass CSS-Stile Priorität haben. Obwohl dieser Vorgang von Scoped den Zweck der Modularisierung von Komponentenstilen erfüllt, hat er Konsequenzen: Das Gewicht jedes Stils wird erhöht: Wenn wir diesen Stil ändern möchten, ist theoretisch eine höhere Gewichtung erforderlich, um diesen Stil abzudecken. Dies ist eine der Dimensionen, die die Komplexität erhöhen.

Andere Komponenten verweisen auf die Schaltflächenkomponente

Oben wird das Ergebnis des Renderns einer einzelnen Komponente analysiert. Was passiert also, nachdem sich die Komponenten gegenseitig aufgerufen haben? , insbesondere in zwei Situationen unterteilt: Allgemeine Modulkomponenten beziehen sich auf private Modulkomponenten (im Wesentlichen dasselbe wie private Modulkomponenten auf allgemeine Modulkomponenten);

Zum Beispiel: Wenn die Schaltflächenkomponente in der Komponente content.vue verwendet wird, was ist der Unterschied im Rendering-Ergebnis, wenn die Komponente content.vue das bereichsbezogene Attribut hinzufügt?

//content.vue
<template>
  <p class="content">
    <p class="title"></p>
    <!-- v-button假设是上面定义的组件 -->
    <v-button></v-button>
  </p>
</template>
...
<style>
  .content{
    width: 1200px;
    margin: 0 auto;
  }
  .content .button{
    border-raduis: 5px;
  }
</style>

Allgemeine Komponenten des Moduls (ohne Gültigkeitsbereich) verweisen auf private Komponenten des Moduls

Wenn das Attribut mit Gültigkeitsbereich nicht zum Stil hinzugefügt wird, lauten die gerenderten HTML- und CSS-Dateien wie folgt:

<p class="content">
  <p class="title"></p>
  <!-- v-button假设是上面定义的组件 -->
  <p data-v-2311c06a class="button-warp">
    <button data-v-2311c06a class="button">text</button>
  </p>
</p>

/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content{
  width: 1200px;
  margin: 0 auto;
}
.content .button{
  border-raduis: 5px;
}

Okay, es ist ersichtlich, dass, obwohl das Border-Raduis-Attribut der Schaltfläche in der Inhaltskomponente aufgrund der Gewichtsbeziehung geändert wird, der Stil innerhalb der Komponente weiterhin wirksam ist (zu diesem Zeitpunkt wird der externe Stil überschrieben). Wenn wir also den Zweck der Stiländerung erreichen möchten, müssen wir die Gewichtung des Stils erhöhen, den wir ändern möchten (Selektorebene, ID-Selektor, Parallelselektor, wichtig usw. hinzufügen)

Private Komponente des Moduls (bereichsgebunden hinzufügen) Private Komponente des Referenzmoduls

Was passiert, wenn das Attribut mit Gültigkeitsbereich hinzugefügt wird? Gemäß den zu Beginn analysierten Regeln (dies gilt auch):

Fügen Sie zuerst das Datenattribut

zu allen DOM-Knoten hinzu und fügen Sie dann am Ende den Datenattributselektor hinzu CSS-Selektor

Dann sind das gerenderte HTML und CSS:

<p data-v-57bc25a0 class="content">
  <p data-v-57bc25a0 class="title"></p>
  <!-- v-button假设是上面定义的组件 -->
  <p data-v-57bc25a0 data-v-2311c06a class="button-warp">
    <button data-v-2311c06a class="button">text</button>
  </p>
</p>

/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content[data-v-57bc25a0]{
  width: 1200px;
  margin: 0 auto;
}
.content .button[data-v-57bc25a0]{
  border-raduis: 5px;
}

Für die beiden oben genannten Situationen ist deutlich zu erkennen, dass die Rendering-Ergebnisse sehr unterschiedlich sind.

Obwohl wir im Inhalt Code hinzugefügt haben, um den Stil der Schaltflächenkomponente zu ändern, schauen Sie genau hin, da der .content .button-Satz am Ende mit dem Bereichs-Tag der Inhaltskomponente, dem letzten Satz, hinzugefügt wird hat tatsächlich den grundlegenden Effekt. Es befindet sich nicht auf dem DOM-Knoten, den wir wollen. In diesem Fall wirken sich alle Stile, die wir in den Inhalt schreiben, nicht auf die button.vue-Komponente aus, was peinlich ist. . . .

Natürlich kann dieses Problem auch gelöst werden, d Das style-Tag des bereichsbezogenen Attributs bedeutet das Hinzufügen von zwei Stilen, einem für private Stile und einem für öffentliche Stile. Das ist auf jeden Fall ein bisschen beschissen, und keine Lösung vermeidet ein Problem: Gewicht! ! !

//content.vue
<template>
  <p class="content">
    <p class="title"></p>
    <!-- v-button假设是上面定义的组件 -->
    <v-button></v-button>
  </p>
</template>
...
<style scoped>
  .content{
    width: 1200px;
    margin: 0 auto;
  }
</style>
<style>
  .content .button{
    border-raduis: 5px;
  }
</style>

Ist das verordnungskonform? Es scheint, dass ich nicht gesehen habe, dass ich es nicht so schreiben kann, und es hat tatsächlich Wirkung gezeigt. . . Dies erhöht jedoch die Komplexität des Denkens, was ein wenig beunruhigend ist.

Zusammenfassung der bereichsbezogenen Rendering-Regeln

Zusammenfassung der drei bereichsbezogenen Rendering-Regeln

1. Fügen Sie ein Nicht-Duplikat zum hinzu HTML-DOM-Knotendatenattribut (Formular: data-v-2311c06a), um seine Einzigartigkeit anzuzeigen

2. Fügen Sie am Ende jedes CSS-Selektors (kompilierte und generierte CSS-Anweisung) einen Datenattributselektor der aktuellen Komponente (z. B. [data-v-2311c06a]) hinzu, um den Stil zu privatisieren

3. Wenn die Komponente andere Komponenten enthält, wird nur das Datenattribut der aktuellen Komponente zum äußersten Tag anderer Komponenten hinzugefügt

Lösung

Für die referenzierte Drittanbieter-Bibliothek können wir nichts ändern, wenn die andere Partei Scoped verwendet. Wenn wir ihren Stil wirklich ändern müssen, können wir den Stil in der Komponente am besten ohne Scoped ändern. oder global Den Stil direkt zu ändern ist sehr unhöflich!

Für die Komponenten, die Sie pflegen, müssen Sie klar darüber nachdenken, ob der Stil der Komponente allen Situationen gerecht wird. Wenn es wirklich notwendig ist, es hinzuzufügen, wird es zweifellos die Arbeit der Entwickler erhöhen, die diese Komponente verwenden!

Wenn Sie eine bessere Lösung für dieses Problem haben, sagen Sie es mir bitte!

Interessante Fakten

Bei der Verwendung von Scoped müssen Sie bei dieser Funktion von Scoped vorsichtig sein, also habe ich es angesprochen ein Problem Die ursprüngliche Absicht des Scoped-Designs besteht nicht darin, zuzulassen, dass der Stil der aktuellen Komponente aufgrund des Designs den Stil eines anderen Ortes verändert. Daher wurde dieses Problem natürlich geschlossen

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Über Kryptomodul-Sicherheitskenntnisse in Nodejs (ausführliches Tutorial)

So implementieren Sie ein unscharfes Dropdown-Feld in Angular Query-Funktion

So implementieren Sie eine Anmeldung in js, die eine gleitende Überprüfung erfordert

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Gültigkeitsbereichsattribut von style in vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!