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## に登録します。 #. 親コンポーネント内で子コンポーネントを使用します。コンポーネントのネストは、 を使用して、親コンポーネントに子コンポーネントのテンプレートを導入することで実現できます。

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 を受け取ります。

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/ または >>> を追加する必要があります。 上記のコードでは、

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

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

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

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>

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

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