フロントエンド開発 - Vue 機能コンポーネント

機能コンポーネント機能コンポーネントはステートレスで、インスタンス化できず、ライフサイクルやメソッドを持ちません。機能コンポーネントの作成も簡単で、テンプレートに関数宣言を追加するだけです。通常、外部データの変更のみに依存するコンポーネントに適しており、軽量であるためレンダリングパフォーマンスが向上します。コンポーネントが必要とするものはすべて、コンテキストパラメーターを介して渡されます。これはコンテキストオブジェクトです。特定のプロパティについてはドキュメントを参照してください。ここで props は、バインドされたすべてのプロパティを含むオブジェクトです。

<template functional>
    <div class="list">
        <div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
            <p>{
   
   {item.title}}</p>
            <p>{
   
   {item.content}}</p>
        </div>
    </div>
</template>

親コンポーネントが使用する

<template>
    <div>
        <List :list="list" :itemClick="item => (currentItem = item)" />
    </div>
</template>

import List from  @/components/List.vue
export default {
    components: {
        List
    },
    data() {
        return {
            list: [{
                title:  title ,
                content:  content
            }],
            currentItem:
        }
    }
}

3. スタイルスコープ開発中にサードパーティコンポーネントのスタイルを変更することは非常に一般的ですが、スコープ属性のスタイル分離により、スコープ属性を削除するか、新しいスタイルを作成する必要がある場合があります。これらのプラクティスには副作用 (コンポーネントスタイルの汚染、優雅さの欠如) があり、css プリプロセッサでのスタイルの浸透を使用して効果を発揮します。>>> または /deep/ を使用して、この問題を解決できます。

<style scoped>
Outer layer >>> .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

<style scoped>
/deep/ .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

フロントエンド開発 - Vue 機能コンポーネント

おすすめ