How does Vue implement component nesting and component style management?

Vue.js is a lightweight JavaScript framework that features data-driven, responsive update views. The core concept of Vue.js is componentization. Components can be buttons, forms, modal boxes, etc., which can be freely combined and split into smaller components. The component nesting and style management of Vue.js are essential knowledge points in component development. This article will explain in detail how to implement component nesting and style management in Vue.

Component nesting

Component nesting refers to placing one component inside another component to form a parent-child component relationship, passing data to the child component through the parent component, and the child component can also send data to the parent component. Components pass data to achieve communication between components. Vue.js is very convenient to implement component nesting. You only need to introduce the template of the child component inside the parent component. The following is a simple example:

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

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

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

The above code is a parent component, introduce the sub-component through import, and then register the sub-component in components. Use child components within parent components. Component nesting can be achieved by introducing the template of the child component in the parent component using <child-component></child-component>.

In child components, we usually get data from the parent component. Data transfer between parent and child components in Vue.js is mainly implemented in two ways: props and $emit. props means that the parent component passes data to the child component, and the child component obtains the data passed by the parent component by receiving props. The following is a simple props example:

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

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

The above code is a subcomponent that defines a named name through props Attribute, when the parent component passes data to the child component, it passes it through the name attribute. In the template of the child component, you can obtain the data passed by the parent component through {{ name }}.

When passing data from the parent component to the child component, you can pass the data through the v-bind directive. As shown below:

<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>

In the parent component, we define a variable named fatherName to store the name of the parent component. In the child component, we receive fatherName via props.

Component style management

Component style management refers to how to manage the styles of components in Vue.js to ensure that the styles of each component do not affect each other and are easy to maintain. Vue.js provides two ways to manage component styles: scope styles and CSS Modules.

Scope style

Scope style refers to using the scoped attribute to define the style in the component, so that the component style is only valid for the current component. For example:

<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>

In this component, we added the scoped attribute to the style tag, that is, style scoped. The style defined in this way is only effective for the current component and will not affect other components or global styles.

There is a disadvantage of using scope styles: deep selectors are not supported. In a component, if you want to use a deep selector, you must add /deep/ or before the selector, as shown below:

<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>

In the above code, we use /deep/ .sub-component in the style definition of .component, and in the style of .sub-title is used in the definition. This allows you to define depth selectors in scope styles.

CSS Modules

CSS Modules is a modular CSS solution that can modularize and name CSS to ensure that the style of each component is independent. Vue.js provides support for CSS Modules, and we can use independent CSS Modules in each component.

First, we need to install css-loader and style-loader, and add configuration about CSS Modules in the Webpack configuration file:

// 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
          }
        }
      }
    ]
  }
  // ...
}

In the above code, we added modules to the configuration of css-loader, indicating that CSS Modules is enabled. The cssModules attribute is added to the configuration of vue-loader, indicating that CSS Modules are enabled in the single-file component of Vue.js.

In single-file components, we can specify the CSS Module name through the scoped attribute.

<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>

In the above code, we added the module attribute to the style tag, indicating that this is a CSS Module. In CSS, we can define styles in the traditional way without using scoped styles or deep selectors.

When introducing CSS Module into a component, you need to use the $style object, as shown below:

<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>

In the above code, we use $style. title refers to the title style defined in this component.

Summary: Vue.js provides two ways to manage component styles: scope styles and CSS Modules. Scoped styles are suitable for simple styles, while CSS Modules are suitable for componentized applications, which modularize CSS and ensure that each component's style is independent.

The above is the detailed content of How does Vue implement component nesting and component style management?. For more information, please follow other related articles on the PHP Chinese website!