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の主キー制約とユニーク制約の違いについて簡単に説明します。

推薦する

MySQL 8.0.17 winx64 (Navicat 付き) 手動構成バージョンのインストール チュートリアル図

1. ダウンロードアドレス: mysql-8.0.17-winx64ダウンロードして解凍する2. フ...

ページ切り替え効果を実現するJSコード

この記事の例では、ページ切り替え効果を実現するためのJSコードの具体的なコードを参考までに共有してい...

MySQLの日付文字列タイムスタンプ変換の詳細な説明

時刻、文字列、タイムスタンプ間の変換は、日常生活でよく使用されます。よく使用されますが、私は使用する...

js キャンバスはランダムなパーティクル効果を実現します

この記事の例では、参考のためにjsキャンバスランダムパーティクルエフェクトの具体的なコードを共有して...

JavaScript のマクロタスクとマイクロタスクの詳細

目次1. マイクロタスクとは何ですか? 2. マクロタスクとは何ですか? 3. 事例3.1 結論4....

H5でクリックされたときにaタグの背景色をキャンセルする方法

1. モバイル端末でクリックされたときにタグの青色を解除する { -webkit-tap-highl...

MySQL関連のツールをいくつかお勧めします

序文:インターネット技術の継続的な発展に伴い、MySQL 関連のエコシステムはますます充実し、ますま...

jsシミュレーションでJingdongの詳細ページで画像を拡大する効果を実現

この記事では、Jingdongの詳細ページの画像の拡大を実現するためのjsの具体的なコードを紹介しま...

MySQL 外部キー設定方法の例

1. 外部キーの設定方法1. MySQL では、2 つのテーブルを関連付けるために、外部キー (FO...

LinuxのCPU負荷とCPU使用率の詳細な説明

CPU 負荷と CPU 使用率これらは両方とも、ある程度、マシンの忙しさを反映できます。 CPU 使...

VMware 上の CentOS に Oracle12.2 をサイレント インストールする詳細なグラフィック チュートリアル

環境準備: VMware+CentOS、jdk 1. システムディスクのサイズを確認する1. コマン...

完璧なアロエベラジェルを選ぶには?完璧なアロエベラジェルの本物と偽物の見分け方

最新のパーフェクト アロエ ベラ ジェルのパッケージ ボックスには、赤いフォントで完璧な英語の文字が...

WeChatアプレットがジグソーパズルゲームを実装

この記事では、WeChatアプレットでジグソーパズルゲームを実装するための具体的なコードを参考までに...

mySQLキーワードの実行優先度の説明

以下のように表示されます。表から条件フィールドでグループ化仮想テーブルとフィールドを作成し、フィール...

Reactにおけるコンポーネント通信の詳細な説明

目次親コンポーネントは子コンポーネントと通信します子コンポーネントは親コンポーネントと通信しますコン...