VueとVueComponentの関係の詳細な説明

VueとVueComponentの関係の詳細な説明

次のケースでは、これまでに学んだプロトタイプチェーンの知識ポイントを確認します。

       // コンストラクタ関数を定義する Demo() {
            これ.a = 1
            これ.b = 2
        }
        //デモインスタンスオブジェクトを作成する const d = new Demo()
        console.log(Demo.prototype); //プロトタイププロパティを表示 console.log(d.__proto__); //暗黙的なプロトタイププロパティ console.log(Demo.prototype === d.__proto__); //true
        //プログラマーはプロトタイプ属性を表示し、値99のx属性を追加することでプロトタイプオブジェクトを操作します。
        デモ.プロトタイプ.x = 99
        コンソールにログ出力します。 

次のコンポーネントに従ってVueComponentを分析する

<本文>
    <div id="ルート">
         <学校></学校>
    </div>
    <スクリプト>
        Vue.config.productionTip = false
        //学校コンポーネントを定義する const school = Vue.extend({
            名前: '学校',
            テンプレート: `
              <div>
                <h2>学校名: {{name}}</h2>
                <h2>学校の住​​所: {{address}}</h2>
              </div>
            `、
            データ() {
                戻る {
                    名前:「シャン・シリコンバレー」
                    住所: '北京'
                }
            }   
        })
        //Vue を作成
        新しいVue({
            el:'#root',
            コンポーネント:{
                学校、
            }
        })
    </スクリプト>
</本文> 

1. 学校コンポーネントは本質的にはVueComponentと呼ばれるコンストラクタであり、プログラマによって定義されるのではなく、 Vue.extend によって生成されます。

2. <school/> または <school</school> と書くだけで、Vue は解析時に school コンポーネントのインスタンス オブジェクトの作成を手伝ってくれます。つまり、Vue はnew VueComponent(options)の実行を手伝ってくれます。

3. 特記事項: Vue.extendが呼び出されるたびに、新しいVueComponentが返されます。

4. この指摘について:

  • コンポーネント構成では、 data関数、 methods内の関数、 watch内の関数、 computed内の関数、これらはすべてVueComponentインスタンス オブジェクトです。
  • new Vue(options)構成では、 data関数、 methods内の関数、 watch内の関数、 computed内の関数、これらはすべて Vue インスタンス オブジェクトです。

5. VueComponentインスタンスオブジェクト(以下vcと呼ぶ) ---- コンポーネントインスタンスオブジェクト

要点

  • 重要な組み込み関係: VueComponent.prototype._proto_===Vue.prototype
  • この関係が必要な理由:コンポーネントインスタンスオブジェクトvcがVueプロトタイプのプロパティとメソッドにアクセスできるようにするため

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue 組み込みコンポーネント - is 属性を通じてコン​​ポーネント操作を動的にレンダリングします
  • Vue.component プロパティの説明
  • vue 動的コンポーネント
  • Vueコンポーネントの動的コンポーネントの詳細な説明
  • Vueのコンポーネントタグレンダリング問題を解決する

<<:  CSS 8 目を引く HOVER 効果のサンプル コード

>>:  MYSQLの主キー制約とユニーク制約の違いについて簡単に説明します。

推薦する

Vue.jsの機能コンポーネントに関する包括的な理解

目次序文React 関数コンポーネントVue (2.x) の機能コンポーネント🌰 例: el-tab...

Tableとdivの簡単な紹介と使い方

ウェブフロントエンド1学生証名前性別年01張三男20 02李思女性21総人数60フォームのコンポーネ...

MySQL クラスター化インデックスのページ分割原理の分析例

この記事では、MySQL クラスター化インデックスのページ分割を例を使って説明します。ご参考までに、...

Vuex環境の詳細な説明

目次Vuex環境を構築する要約するVuex環境を構築するsrcディレクトリにフォルダstoreを作成...

nginx のロケーションで URI の傍受を実装する方法

例:場所のルートとエイリアスルートディレクティブは、ルートによって設定されたディレクトリに検索ルート...

CentOS7.6にMYSQL8.0をインストールする詳細な手順

1. 一般的に、CentOS では mariadb がデフォルトでインストールされているため、まず ...

Vue はクリックフリップ効果を実現します

参考までに、vueを使用してクリックフリップエフェクトを簡単に実装します。具体的な内容は次のとおりで...

PostgreSQL マテリアライズドビュープロセス分析

この記事は主にPostgreSQLマテリアライズドビューのプロセス分析について紹介します。サンプルコ...

フォーム送信の更新ページはソースコード設計にジャンプしません

1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

プロセスごとにネットワーク帯域幅を監視する Linux ツール Nethogs のインストールと展開

概要Linux 用のオープン ソース ネットワーク監視ツールは数多くあります。たとえば、帯域幅の使用...

sed コマンドを使用してファイルの特定の行を効率的に削除する方法

序文通常、ファイル内の特定の行を削除したい場合は、まずファイルを開き、削除する内容を見つけて、これら...

mysql5.7.17.msi インストール グラフィック チュートリアル

mysql-5.7.17.msiのインストール、スクリーンショットに従ってください、ステップバイステ...

Vue の新しいおもちゃ VueUse の具体的な使い方

目次序文VueUseとは使いやすいおなじみの手ぶれ補正やスロットル機能もありますグローバル状態を共有...

MySQL 8.0.15 のインストールと設定のグラフィックチュートリアルと Linux でのパスワード変更

このブログは、MySQL8.0.15 を正常にインストールしたことを思い出すために書きました。以前は...

Vueはel-tableを使用して列と行を動的に結合します

この記事の例では、el-tableを使用して列と行を動的にマージするVueの具体的なコードを参考まで...