同じ関数や HTML コードが複数回使用される場合は、それらをコンポーネントに抽出することを検討できます。コンポーネントの利点は、使用したいときに呼び出して、変更したいときにパラメータを渡すことができることです。 コンポーネントとは何かオブジェクト指向の考え方を使用して Vue コンポーネントを理解すると、すべてのものをオブジェクトに抽象化でき、クラスまたはコンポーネントにはプロパティと操作が含まれます。 たとえば、人間を構成要素として抽出すると、その基本的な属性には名前、年齢、国籍が含まれ、基本的な方法には食べる、寝る、走るなどが含まれます。 <スクリプト> エクスポートデフォルト{ 名前: '人'、 小道具: { 名前: { タイプ: 文字列、 必須: false、 デフォルト: '匿名' }, 年: { タイプ: 数値、 必須: false、 デフォルト: 0 }, 国: タイプ: 文字列、 必須: false、 デフォルト: '地球人' } }, メソッド: { 食べる() { consloe.log('食べる') }, 寝る() { console.log('スリープ') }, 走る() { console.log('実行中') } } } </スクリプト> オブジェクト指向プログラミングでは、コンストラクターはクラスのグローバル変数を初期化できるため、このアプローチはコンポーネントでも使用できます。 <person :age="20" :name="'シャオミン'" :country="'中国語'"></person> コンポーネントはデータと操作をカプセル化します。入力されたものは出力されなければなりません。コンポーネント内で何が起こっているかを気にする必要はありません。必要なのは、結果と提示される効果だけです。 カスタムイベント外部からコンポーネントのプロパティに直接アクセスできない場合はどうすればよいですか? $emit カスタム イベントを使用すると、外部からコンポーネント プロパティを取得できます。 <テンプレート> ... <button @click="handleClick">クリック</button> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: '人'、 メソッド: { ハンドルクリック() { this.$emit('getPerson', { 年齢: this.age, 名前: this.name, 国: this.country }) } } } </スクリプト> 外部コンポーネントが呼び出されたら、カスタム関数 <テンプレート> <div> <person :age="20" :name="'シャオミン'" :country="'中国語'" @getPerson="getPerson"></person> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'テスト', メソッド: { getPerson(情報) { console.log(情報) } } } </スクリプト> 実際の事例Web 開発ではタグを使用することがありますが、タグはページ内で 1 回使用されるのではなく、複数回使用される可能性があると考えるかもしれません。さまざまな状況に合わせて、幅、高さ、色をカスタマイズすることもできます。 したがって、タグに関連する HTML コードと CSS をコンポーネントにカプセル化し、幅、高さ、およびタイプのパラメータを外部に公開することができます。使用時に、さまざまな状況に応じてカスタマイズする必要がある場合は、パラメータを渡すだけです。 <テンプレート> <表示 :style="{ 幅: 幅、高さ: 高さ }" :class="['owl-tag-' + タイプ]" クラス="owl-tag text-xs flex align-center justify-center" > <スロット></スロット> </ビュー> </テンプレート> <スクリプト> 名前: 'owl-tag', 小道具: { // 渡すことができる有効な値は primary | gray です タイプ: { タイプ: 文字列、 デフォルト: 'プライマリ' }, 幅: { タイプ: 文字列、 必須: false }, 身長: タイプ: 文字列、 必須: false } } </スクリプト> <スタイル> .owlタグ{ 境界線の半径: 8rpx; パディング: 6rpx 10rpx; } .owl-tag-primary { 色: 白; 背景色: #87cefa; } .owl-tag-gray { 色: #81868a; 背景色: #f0f1f5; } </スタイル> これらのタスクが完了すると、コンポーネントが定義されます。使いたいときに呼び出して、変更したいときにパラメータを渡すことができる。これがコンポーネントの利点です。 <テンプレート> <フクロウタグ :type="'プライマリ'" :height="'45rpx'" :width="'120rpx'" > 公式投稿</owl-tag> </テンプレート> type の値を gray に変更すると、次の効果が得られます。 これで、オブジェクト指向の考え方から Vue コンポーネントを理解するこの記事は終了です。より関連性の高い Vue コンポーネントのオブジェクト指向コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Windows に WSL をインストールして構成する方法
>>: MYSQLのバックアップデータのスケジュールクリアの特定の操作
目次FileReaderはローカルファイルまたはBLOBを読み取ります1. FileReaderの使...
序文JavaScript は習得が最も簡単な言語の 1 つであるため、成長と繁栄を続けており、市場に...
序文ビューは、データベース システム内で非常に便利なデータベース オブジェクトです。 MySQL 5...
バブリングとは何ですか? DOM イベント フローには、イベント キャプチャ ステージ、ターゲット ...
ネットで検索してみたところ、多くの面接でモバイル適応方法について質問されることが分かりました。最近い...
Flexの基本概念フレックス レイアウト (フレックスはフレキシブル ボックスの略)、エラスティック...
目次1. 型2. インスタンス3. コンストラクター4.toString() この記事では、4 つの...
CentOS7では、MySQLをインストールすると、MariaDBもデフォルトでインストールされます...
metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもし...
目次cgroupとはcgroupの構成cgroupが提供する機能cgroup 内の CPU を制限す...
MySQL はディスクに保存される永続的なストレージであり、取得には一定の IO が伴うことはご存じ...
1. 内閣府マスターノードを監視することで、他のスレーブノードへの自動フェイルオーバーを実現できます...
目次React Hooks に基づく状態共有の実装ユーザーエクスペリエンスこの記事では、主に Rea...
序文フロントエンドページを書くとき、小さなアイコンなどの画像を使うことが多いです。画像を使うとコード...
この記事では、カラービューアを実装するためのJavaScriptの具体的なコードを参考までに紹介しま...