Comment Vue implémente la portée locale et la modularisation

Cette fois, je vais vous montrer comment Vue implémente la portée et la modularisation locales, et quelles sont les précautions à prendre par Vue pour implémenter la portée et la modularisation locales. Voici un cas pratique, jetons un coup d'œil.

Les modules CSS donnent à chaque classe locale un nom de classe globalement unique afin que les styles de composants ne s'affectent pas les uns les autres. Par exemple :

/* button.css */
.button {
 font-size: 16px;
}
.mini {
 font-size: 12px;
}

Il sera converti en quelque chose comme ceci :

/* button.css */
.button__button--d8fj3 {
 font-size: 16px;
}
.button__mini--f90jc {
 font-size: 12px;
}

Lors de l'importation d'un fichier de module CSS, il fournira un objet de mappage du nom de classe locale à la classe globale nom pour nous. Comme ceci :

import styles from './button.css'
// styles = {
// button: 'button__button--d8fj3',
// mini: 'button__mini--f90jc'
// }
element.innerHTML = '<button class="&#39; + styles.button + &#39; &#39; + styles.mini + &#39;" />'

vue-css-modules : Mappage de nom de classe simplifié

Voici un bouton utilisant les composants des modules CSS :

<template>
 <button :class="{
 &#39;global-button-class-name&#39;: true,
 [styles.button]: true,
 [styles.mini]: mini
 }">点我</button>
</template>
<script>
 import styles from './button.css'
 export default {
 props: { mini: Boolean },
 data: () => ({ styles })
 }
</script>

En effet, les modules CSS sont un bon choix pour les composants Vue. Mais il y a aussi les défauts suivants :

• Vous devez transmettre les styles dans data

• Vous devez utiliser styles.localClassName pour importer la classe globale name

• S'il existe d'autres noms de classes globales, vous devez les assembler

• Si vous souhaitez vous lier à la valeur de propriété du composant , même s'il est local Le nom de la classe est le même que le nom de l'attribut, et doit également être explicitement spécifié

• 
  

Pour le composant bouton ci-dessus, utilisez vue-css-modules Après :

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

Maintenant :

• Vous n'êtes pas obligé de transmettre des styles dans les données, mais vous devez passer des styles dans les mixins:full_moon_with_face:

• Vous pouvez dire au revoir à styles.localClassName

• Mettez le nom de la classe locale dans l'attribut styleName et le nom de classe global dans l'attribut class, qui est beaucoup plus organisé

• Le nom de classe local lie la propriété du composant du même nom, il suffit d'ajouter devant : modificateur

modificateur

@button

<button styleName="@button">按钮</button>

Cela équivaut à :

<button styleName="button" data-component-button="true">按钮</button>

Cela permet de réinitialiser le style du composant en externe :

.form [data-component-button] {
 font-size: 20px;
}

$type

<button styleName="$type">按钮</button>

Cela équivaut à :

<button :styleName="type">按钮</button>

:mini

<button styleName=":mini">按钮</button>

Cela équivaut à :

<button :styleName="mini ? &#39;mini&#39; : &#39;&#39;">按钮</button>
disabled=isDisabled
<button styleName="disabled=isDisabled">按钮</button>

Cela équivaut à :

<button :styleName="isDisabled ? &#39;disabled&#39; : &#39;&#39;">按钮</button>

Méthode d'utilisation

Utilisez

pour introduire le modèle dans le modèle Vue Modules CSS externes

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

Utiliser les modules CSS internes au modèle

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 export default {
 mixins: [CSSModules()],
 props: { mini: Boolean }
 }
</script>
<style module>
 .button {
 font-size: 16px;
 }
 .mini {
 font-size: 12px;
 }
</style>

Utilisation dans Vue JSX

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render() {
 return (
  <button styleName="@button :mini">点我</button>
 )
 }
}

Utilisation dans la fonction de rendu Vue

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render(h) {
 return h('button', {
  styleName: '@button :mini'
 }, '点我')
 }
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisez JS pour manipuler des images, en ne laissant que le noir et blanc

Encapsulez les crochets de navigation de routage Vue2 et utilisez-les en combat réel. Utilisez

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!