Vue はコンポーネントのネストとコンポーネント スタイル管理をどのように実装しますか?

Vue.js は、データ駆動型で応答性の高い更新ビューを備えた軽量の JavaScript フレームワークです。 Vue.js の中核となる概念はコンポーネント化であり、ボタン、フォーム、モーダル ボックスなどのコンポーネントを自由に組み合わせたり、小さなコンポーネントに分割したりできます。 Vue.js のコンポーネントのネストとスタイル管理はコンポーネント開発において必須の知識ですが、この記事では Vue でコンポーネントのネストとスタイル管理を実装する方法について詳しく説明します。

コンポーネントのネスト

コンポーネントのネストとは、あるコンポーネントを別のコンポーネントの中に配置して親子コンポーネント関係を形成し、親コンポーネントを介して子コンポーネントにデータを渡すことを指します。また、子コンポーネントは親コンポーネントにデータを送信する コンポーネントはデータを渡してコンポーネント間の通信を実現します。 Vue.js は、親コンポーネントの中に子コンポーネントのテンプレートを導入するだけで、コンポーネントのネストを実装するのに非常に便利です。以下は簡単な例です:

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

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

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

上記のコードは親コンポーネントであり、import を通じてサブコンポーネントを導入し、そのサブコンポーネントを components## に登録します。 #. 親コンポーネント内で子コンポーネントを使用します。コンポーネントのネストは、 を使用して、親コンポーネントに子コンポーネントのテンプレートを導入することで実現できます。

子コンポーネントでは、通常、親コンポーネントからデータを取得します。 Vue.js の親コンポーネントと子コンポーネント間のデータ転送は、主に

props と $emit の 2 つの方法で実装されます。 props は、親コンポーネントが子コンポーネントにデータを渡し、子コンポーネントが props を受け取ることで親コンポーネントから渡されたデータを取得することを意味します。以下は、単純な props の例です。

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

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

上記のコードは、名前付き

name から props 属性を定義するサブコンポーネントです。親コンポーネントが子コンポーネントにデータを渡すと、そのデータは 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 では、コンポーネント スタイルを管理する 2 つの方法、スコープ スタイルと CSS モジュールを提供します。

スコープ スタイル

スコープ スタイルとは、コンポーネント スタイルが現在のコンポーネントに対してのみ有効になるように、

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 属性をスタイル タグに追加しました。つまり、stylescoped です。この方法で定義されたスタイルは、現在のコンポーネントに対してのみ有効であり、他のコンポーネントやグローバル スタイルには影響しません。

スコープ スタイルを使用する場合には、ディープ セレクターがサポートされないという欠点があります。コンポーネントでディープ セレクターを使用する場合は、次に示すように、セレクターの前に

/deep/ または >>> を追加する必要があります。 上記のコードでは、

.component

のスタイル定義と .sub-title# のスタイルで /deep/ .sub-component を使用しています。 ##>>> は定義で使用されます。これにより、スコープ スタイルで深さセレクターを定義できるようになります。 CSS モジュール

CSS モジュールは、CSS をモジュール化して名前を付けることで、各コンポーネントのスタイルが独立していることを確認できるモジュール式 CSS ソリューションです。 Vue.js は CSS モジュールのサポートを提供しており、各コンポーネントで独立した CSS モジュールを使用できます。

まず、

css-loader

と

style-loader をインストールし、Webpack 設定ファイルに CSS モジュールに関する設定を追加する必要があります:

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

上記のコードでは、modules

を

css-loader の設定に追加し、CSS モジュールが有効であることを示しています。 cssModules 属性が vue-loader の構成に追加され、CSS モジュールが Vue.js の単一ファイル コンポーネントで有効であることを示します。 単一ファイル コンポーネントでは、scoped

属性を通じて CSS モジュール名を指定できます。

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

上記のコードでは、module

属性を

style タグに追加し、これが CSS モジュールであることを示しています。 CSS では、スコープ付きスタイルやディープ セレクターを使用せずに、従来の方法でスタイルを定義できます。 CSS モジュールをコンポーネントに導入するときは、以下に示すように、$style

オブジェクトを使用する必要があります。

<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.title は、このコンポーネントで定義されている

title スタイルを参照します。 概要: Vue.js では、コンポーネント スタイルを管理する 2 つの方法、スコープ スタイルと CSS モジュールを提供します。スコープ付きスタイルは単純なスタイルに適していますが、CSS モジュールは CSS をモジュール化して各コンポーネントのスタイルが独立しているようにするコンポーネント化されたアプリケーションに適しています。

以上がVue はコンポーネントのネストとコンポーネント スタイル管理をどのように実装しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。