Comment Vue implémente-t-il l'imbrication des composants et la gestion des styles de composants ?

Vue.js est un framework JavaScript léger qui propose des vues de mise à jour réactives et basées sur les données. Le concept principal de Vue.js est la création de composants. Les composants peuvent être des boutons, des formulaires, des boîtes modales, etc., qui peuvent être librement combinés et divisés en composants plus petits. L'imbrication des composants et la gestion des styles de Vue.js sont des points de connaissances essentiels dans le développement de composants. Cet article expliquera en détail comment implémenter l'imbrication des composants et la gestion des styles dans Vue.

Imbrication de composants

L'imbrication de composants fait référence au placement d'un composant dans un autre composant pour former une relation de composant parent-enfant, en transmettant des données au composant enfant via le composant parent, et le composant enfant Vous pouvez également transmettre des données aux composants parents pour établir la communication entre les composants. Vue.js est très pratique pour implémenter l'imbrication de composants. Il vous suffit d'introduire le modèle du composant enfant à l'intérieur du composant parent. Ce qui suit est un exemple simple :

<template>
  <div>
    <h1>父组件</h1>
    <child-component></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue'

export default {
  components: {
    'child-component': childComponent
  }
}
</script>

Le code ci-dessus est un composant parent, qui introduit les composants enfants via import, puis enregistre l'enfant dans components</ code> Composant, vous pouvez utiliser des composants enfants dans les composants parents. L'imbrication des composants peut être réalisée en introduisant le modèle du composant enfant dans le composant parent à l'aide de <code><child-component></child-component>. import 引入子组件，然后在 components 中注册子组件，即可在父组件中使用子组件。在父组件中用 <child-component></child-component> 的方式引入子组件的模板，即可实现组件嵌套。

在子组件中，我们通常从父组件获取数据。Vue.js 中父子组件的数据传递主要通过 props 和 $emit 两种方式实现。props 表示父组件向子组件传递数据，子组件通过接收 props 来获取父组件传递的数据。下面是一个简单的 props 例子：

<template>
  <div>
    <h2>子组件</h2>
    <p>父组件的名字是：{{ name }}</p>
  </div>
</template>

<script>
export default {
  props: ['name']
}
</script>

上面的代码是一个子组件，通过 props 定义了一个名为 name 的属性，父组件向子组件传递数据时通过 name 属性进行传递。在子组件的模板中，可以通过 {{ name }} 的方式获取父组件传递的数据。

在父组件中向子组件传递数据时，可以通过 v-bind 指令传递数据。如下所示：

<template>
  <div>
    <h1>父组件</h1>
    <child-component :name="fatherName"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue'

export default {
  data () {
    return {
      fatherName: '张三'
    }
  },
  components: {
    'child-component': childComponent
  }
}
</script>

在父组件中，我们定义了一个名为 fatherName 的变量，用于存储父组件的名字。在子组件中，我们通过 props 来接收 fatherName。

组件样式管理

组件样式管理是指在 Vue.js 中如何管理组件的样式，保证每个组件的样式不会互相影响，且易于维护。Vue.js 提供了两种方式来管理组件样式：作用域样式和 CSS Modules。

作用域样式

作用域样式是指在组件中使用 scoped 属性定义样式，使得该组件样式只对当前组件有效。例如：

<template>
  <div class="component">
    <h2 class="title">标题</h2>
  </div>
</template>

<style scoped>
.component {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
}

.title {
  color: #333;
  font-size: 18px;
  margin-bottom: 10px;
}
</style>

在这个组件中，我们在样式标签上加上了 scoped 属性，即 style scoped。这样定义的样式只对当前的组件有效，不会影响其他组件或全局样式。

使用作用域样式有一个缺点：不支持深度选择器。在组件中，如果要使用深度选择器，必须在选择器前加上 /deep/ 或者 ，如下所示：

<template>
  <div class="component">
    <h2 class="title">标题</h2>
    <div class="sub-component">
      <span class="sub-title">子标题</span>
    </div>
  </div>
</template>

<style scoped>
.component {
  /deep/ .sub-component {
    background-color: #f1f1f1;
  }
  >>> .sub-title {
    color: red;
  }
}
</style>

上面的代码中，我们在 .component 的样式定义中使用了 /deep/ .sub-component，在 .sub-title 的样式定义中使用了 。这样就可以在作用域样式中定义深度选择器了。

CSS Modules

CSS Modules 是一种模块化 CSS 的解决方案，它可以将 CSS 模块化并命名，确保每个组件的样式都是独立的。Vue.js 提供了对 CSS Modules 的支持，我们可以在每个组件中使用独立的 CSS Module。

首先，我们需要安装 css-loader 和 style-loader，并在 Webpack 配置文件中添加关于 CSS Modules 的配置：

// webpack.conf.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        loader: 'style-loader!css-loader?modules'
      },
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: {
          cssModules: {
            localIdentName: '[name]-[hash]',
            camelCase: true
          }
        }
      }
    ]
  }
  // ...
}

上面的代码中，我们在 css-loader 的配置中加上了 modules，表示启用 CSS Modules。在 vue-loader 的配置中加上了 cssModules 属性，表示在 Vue.js 的单文件组件中启用 CSS Modules。

在单文件组件中，我们可以通过 scoped 属性指定 CSS Module 名称。

<template>
  <div class="component">
    <h2 class="title">标题</h2>
  </div>
</template>

<style module>
.component {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
}

.title {
  color: #333;
  font-size: 18px;
  margin-bottom: 10px;
}
</style>

上面的代码中，我们在 style 标签上加上了 module 属性，表示这是一个 CSS Module。在 CSS 中，我们可以采用传统的方式定义样式，不需要使用作用域样式或者深度选择器。

在组件中引入 CSS Module 时，需要使用 $style 对象，如下所示：

<template>
  <div class="component">
    <h2 class="{{$style.title}}">标题</h2>
  </div>
</template>

<style module>
.component {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
}

.title {
  color: #333;
  font-size: 18px;
  margin-bottom: 10px;
}
</style>

上面的代码中，我们使用 $style.title 引用了本组件中定义的 title

Dans les composants enfants, nous obtenons généralement les données du composant parent. Le transfert de données entre les composants parent et enfant dans Vue.js est principalement implémenté via deux méthodes : props et $emit. props signifie que le composant parent transmet les données au composant enfant et que le composant enfant obtient les données transmises par le composant parent en recevant props. Ce qui suit est un exemple simple de props :

rrreee

Le code ci-dessus est un sous-composant qui définit un composant nommé name via <code>props code>, lorsque le composant parent transmet des données au composant enfant, il les transmet via l'attribut name. Dans le modèle du composant enfant, vous pouvez obtenir les données transmises par le composant parent via {{ name }}. #🎜🎜##🎜🎜#Lorsque vous transmettez des données du composant parent au composant enfant, vous pouvez transmettre les données via la directive v-bind. Comme indiqué ci-dessous : #🎜🎜#rrreee#🎜🎜#Dans le composant parent, nous définissons une variable nommée fatherName pour stocker le nom du composant parent. Dans le composant enfant, nous recevons fatherName via props. #🎜🎜##🎜🎜#Gestion des styles de composants#🎜🎜##🎜🎜#La gestion des styles de composants fait référence à la manière de gérer les styles des composants dans Vue.js pour garantir que les styles de chaque composant ne s'affectent pas les uns les autres et sont facile à entretenir. Vue.js propose deux manières de gérer les styles de composants : les styles de portée et les modules CSS. #🎜🎜#

Style de portée

#🎜🎜#Le style de portée fait référence à l'utilisation de l'attribut scoped pour définir le style dans le composant, de sorte que le style du composant ne soit valide que pour le composante actuelle. Par exemple : #🎜🎜#rrreee#🎜🎜#Dans ce composant, nous avons ajouté l'attribut scoped à la balise de style, c'est-à-dire style scoped. Le style ainsi défini n'est valable que pour le composant actuel et n'affectera pas les autres composants ou styles globaux. #🎜🎜##🎜🎜#L'utilisation de styles étendus présente un inconvénient : les sélecteurs profonds ne sont pas pris en charge. Dans un composant, si vous souhaitez utiliser un sélecteur profond, vous devez ajouter /deep/ ou avant le sélecteur, comme indiqué ci-dessous : #🎜 🎜 #rrreee#🎜🎜#Dans le code ci-dessus, nous utilisons /deep/ .sub-component dans la définition de style de .component, et dans .sub - est utilisé dans la définition du style du titre. Cela vous permet de définir des sélecteurs de profondeur dans les styles de portée. #🎜🎜#

Modules CSS

#🎜🎜#CSS Modules est une solution CSS modulaire qui peut modulariser et nommer CSS pour garantir que le style de chaque composant est indépendant. Vue.js prend en charge les modules CSS et nous pouvons utiliser des modules CSS indépendants dans chaque composant. #🎜🎜##🎜🎜#Tout d'abord, nous devons installer css-loader et style-loader, et ajouter la configuration sur les modules CSS dans le fichier de configuration Webpack : #🎜 🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous avons ajouté des modules à la configuration de css-loader, indiquant que les modules CSS sont activés. L'attribut cssModules est ajouté à la configuration de vue-loader, ce qui signifie que les modules CSS sont activés dans le composant monofichier de Vue.js. #🎜🎜##🎜🎜#Dans les composants à fichier unique, nous pouvons spécifier le nom du module CSS via l'attribut scoped. #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous avons ajouté l'attribut module à la balise style, indiquant qu'il s'agit d'un module CSS. En CSS, nous pouvons définir des styles de manière traditionnelle sans utiliser de styles étendus ou de sélecteurs approfondis. #🎜🎜##🎜🎜#Lors de l'introduction du module CSS dans un composant, vous devez utiliser l'objet $style, comme indiqué ci-dessous : #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous utilisons $style.title qui fait référence au style title défini dans ce composant. #🎜🎜##🎜🎜#Résumé : Vue.js propose deux manières de gérer les styles de composants : les styles de portée et les modules CSS. Les styles étendus conviennent aux styles simples, tandis que les modules CSS conviennent aux applications composées de composants, qui modularisent le CSS et garantissent que le style de chaque composant est indépendant. #🎜🎜#

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!