uni-app 入門: コンポーネントの基本的な使い方

     1. コンポーネントの概念
     2. コンポーネントの分類
          2.1 基本コンポーネント
          2.2 拡張コンポーネント
          2.3 easycom 仕様
     3. カスタムコンポーネントと使用
          3.1 ローカル登録
          3.2 グローバル登録

1. コンポーネントコンセプト

最初にコンポーネントとは何かについて話しましょう

公式声明:
コンポーネントは、ビューレイヤーの基本的な構成要素です。コンポーネントは、単一の再利用可能な機能モジュールをカプセル化したものです。

実際、コンポーネントは html のタグに相当するものとして理解できます (たとえば、高速タグ div、行タグスパン)。

2. 成分分類

uni-app のコンポーネントは、基本コンポーネントと拡張コンポーネントに分けられます。

2.1 基本コンポーネント

基本コンポーネントは、ビュー、テキスト、入力、ボタン、ビデオなどの数十の基本コンポーネントを含む、ユニアプリフレームワークに組み込まれています。共通コンポーネントは、公式 Web サイトを参照できます: ユニアプリ基本コンポーネント。コンポーネントだけでは不十分です
。実際の開発では、カプセル化されたコンポーネントが多数存在します。

2.2 拡張コンポーネント

すべてのビジネス要件は基本的なコンポーネントで満たすことができますが、基本的なコンポーネントだけでは効率が悪く、実際の開発ではカプセル化されたコンポーネントが多数存在します。これが拡張コンポーネントの意味です。基本コンポーネントを除いて、それらはすべて拡張コンポーネントと呼ばれます。拡張コンポーネントは、使用する前にプロジェクトにインポートする必要があります。

拡張機能をカプセル化する利点:

コンポーネントは何度でも再利用できます。

コンポーネントを合理的に分割すると、アプリケーションのパフォーマンスが向上します。

コードの整理と管理がより便利になり、スケーラビリティも強化され、複数人での共同開発に便利です。

コンポーネントベースの開発により、アプリケーションの開発効率、テスト容易性、および再利用性が大幅に向上します。

拡張コンポーネントを使用すると、Hbuilder を介してプラグインマーケットからプロジェクトに直接インポートでき、uni_modules通常はデフォルトのインポートディレクトリが使用されます。プラグインアドレス: https://ext.dcloud.net.cn/
ここに画像の説明を挿入

2.3 イージーコム仕様

HBuilderX 2.5.5 からサポート

     従来の vue コンポーネントは、インストール、参照、登録する必要があり、コンポーネントは 3 つの手順で使用できます。easycom はそれを 1 つのステップに要約します。コンポーネントがプロジェクトの components ディレクトリまたは uni_modules ディレクトリにインストールされ、ディレクトリ構造
     に準拠している限り。components/组件名称/组件名称.vue参照や登録なしで、ページ上で直接使用できます。
     easycom は自動的に開かれ、手動で開く必要はありません。
     コンポーネント名またはパスが easycom のデフォルト仕様に準拠していない場合は、pages.json の easycom ノードの設定をパーソナライズして、コンポーネントの一致戦略をカスタマイズできます。詳細については、https:
//uniapp.dcloud.net.cn/collocation/pages.html#easycomを参照してください。

3.カスタムコンポーネントと使用

ディレクトリ構造は次のとおりです。
ここに画像の説明を挿入

コンポーネントの作成: my-component

<template>
  <view class="my-componet-box">
    {
    
    {
    
    title}}
  </view>
</template>

<script>
  export default {
    
    
    // 声明组件名
    name:"my-componet",
    data() {
    
    
      return {
    
    
        title:'我是自定义组件!'
      };
    }
  }
</script>

<style>
  .my-componet-box{
    
    
    width: 100rpx;
    height: 120rpx;
    background-color: green;
  }
</style>

3.1 部分登録

部分登録 (登録ページでのみ使用、例はテストページで使用):

<template>
  <view>
  	<!-- 3.使用组件 -->
     <my-componet></my-componet>
  </view>
</template>

<script>
 // 1.导入组件
  import myComponet from '@/components/my-componet/my-componet.vue'
  export default {
    
    
  // 2.注册组件
    components:{
    
    
      myComponet
    },
    data() {
    
    
      return {
    
    
        
      }
    },
    methods: {
    
    
      
    }
  }
</script>

<style>

</style>

効果表示、カスタムコンポーネントがテストページに表示されます。
ここに画像の説明を挿入

3.2 グローバル登録

グローバル登録 (すべてのページで利用可能):
main.js:

import Vue from 'vue'
import myComonet from '@/components/my-component'
Vue.component('my-comonet',myComonet )

この例は mine ページで使用されています (直接使用できます。インポートして登録する必要はありません)。

<template>
  <view>
    <my-componet></my-componet>
  </view>
</template>

<script>
  export default {
    
    
    data() {
    
    
      return {
    
    
        
      }
    },
    methods: {
    
    
      
    }
  }

表示効果:
ここに画像の説明を挿入
uniapp のその他のコンポーネントについては、https:
//uniapp.dcloud.net.cn/tutorial/vue-components.htmlを参照してください。