Vue のローカルコンポーネントの紹介

Vue のローカルコンポーネントの紹介

Vueでは、ローカルコンポーネントを自分で定義(登録)することができます。

コンポーネント名を定義するには:

var ComponentA = { /* ... */ }

var ComponentB = { /* ... */ }

次に、コンポーネント オプションで使用するコンポーネントを定義します。

新しいVue({
  el: '#app',
 
// コンポーネントセンターコンポーネント: {
 // ビュー層でローカルに登録されたコンポーネントをレンダリングする場合 // component-a: ビュー層で呼び出すときに使用する名前 // ComponentA: ローカルに登録されたコンポーネント名 'component-a': ComponentA,
    'コンポーネント-b': コンポーネントB
  }
})


ビューレイヤーでローカル コンポーネントを呼び出します。

<div id="アプリ">
        <コンポーネント-a></コンポーネント-a>
        <コンポーネント-b></コンポーネント-b>
    </div>


例えば:

<本文>
    
    <div id="アプリ">
        <コンポーネント-a></コンポーネント-a>
        <コンポーネント-b></コンポーネント-b>
    </div>
 
    <script src="./js/vue.js"></script>
    <スクリプト>
        コンポーネントA = {
            テンプレート:`
                <p>私はローカルコンポーネント 1 です</p>
            `
        }
 
        コンポーネントB = {
            テンプレート:`
                <p>私はローカルコンポーネント2です</p>
            `
        }
 
        vm = new Vue({
            el:'#app',
            データ:{
 
            },
            コンポーネント:{
                "コンポーネント-a":コンポーネントA,
                "コンポーネント-b":コンポーネントB
            }
        })
    </スクリプト>


出力は次のようになります。

以下もご興味があるかもしれません:
  • Vue ローカルコンポーネントデータ共有 Vue.observable() の使用
  • Vue のグローバル コンポーネントとローカル コンポーネントの違いの説明
  • VUE登録グローバルコンポーネントとローカルコンポーネントのプロセス分析
  • Vue コンポーネントの定義、グローバル コンポーネントとローカル コンポーネント、テンプレートと動的コンポーネント関数の例
  • Vue のグローバル コンポーネントとローカル コンポーネントの違いの詳細な分析
  • Vueのグローバルコンポーネントとローカルコンポーネントの使い方の詳しい説明
  • Vueコンポーネントにおけるグローバルコンポーネントとローカルコンポーネントの使用の詳細な説明
  • vue.js のグローバルコンポーネントとローカルコンポーネントの詳細な説明

<<:  Google Chromeの自動入力問題に対する完璧な解決策

>>:  HTML のテキストエリア タグ

推薦する

Ubuntu システムでタイムゾーンと時刻を変更する方法

Linux コンピュータには 2 つの時間があります。1 つはハードウェア時間 (BIOS に記録さ...

素晴らしい CSS ナビゲーション バーの下線効果

中国初のカッター github.com/chokcocoまず、ここに画像があります。純粋な CSS ...

Docker で Spring-boot プロジェクトをデプロイするためのサンプル コード

1. 基本的な Spring-boot クイックスタート1.1 クイックスタート pom.xml は...

Vue ルーティングフォールバックに最適なソリューション (vue-route-manager)

目次ルーティングマネージャー背景はじめる問題を解決する方法要約するルーティングマネージャー各ジャンプ...

Vueナンバープレート入力コンポーネントの使い方の詳しい説明

参考までに、シンプルなナンバープレート入力コンポーネント(vue)です。具体的な内容は次のとおりです...

Vue組み込みコンポーネントのキープアライブの使用例

目次1. キープアライブの使用使用例: 1. すべてのページをキャッシュする: 2. 条件に基づいて...

HTML テーブルタグチュートリアル (21): 行の境界線の色属性 BORDERCOLOR

テーブルを美しくするために、行ごとに異なる境界線の色を設定できます。基本的な構文<TR 境界線...

フロントエンドはJavaScriptを通じてCADグラフィックスの詳細を作成および変更します。

目次1. 現状2. JSでCADグラフィックを作成および変更する2.1 サポートされているCADエン...

Linux mpstat コマンドの使用方法の詳細な説明

1. mpstatコマンド1.1 コマンド形式 mpstat [ -A ] [ -u ] [ -V ...

タブ切り替えを実装するための HTML サンプル コード

タブ切り替えもプロジェクトではよく使われる技術です。一般的にタブ切り替えはjsやjqを使って実装され...

ローカルサーバーを構築するためのwebpack-dev-serverの実装

目次序文webpack-deb サーバーwebpack-dev-server 起動エラー解決策1解決...

Spark と Scala を使用して Apache アクセス ログを分析する方法

インストールまず、Java と Scala をインストールし、次に Spark をダウンロードしてイ...

HTML CSS3は画像表示効果を引き伸ばさない

1. transform 属性を使用して、画像を拡大せずに表示します (パスの問題は必要に応じて修正...

React Nativeでシンプルなゲームエンジンを作る

目次導入始めるReact Nativeゲームエンジンの簡単な紹介React Nativeでスネークゲ...

ページスピードの最適化の概要

インターネットは人々の生活にますます欠かせないものになってきていると思います。 Ajax や fle...