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

推薦する

Amoeba を使用して MySQL データベースの読み取り/書き込み分離を実装する方法の詳細な説明

MySQL には読み取りと書き込みを分離するアーキテクチャが多数あります。Baidu のそれらのほと...

Vue モバイル開発で better-scroll を使用するときにクリック イベントが失敗する問題の解決策

最近、モバイル プロジェクトの開発方法を学ぶために vue を使用し、スクロールには better-...

Windows ホストと Docker コンテナに共有フォルダを設定してマウントする手順

Docker コンテナ内のプログラムは、ホスト ディレクトリ内のデータにアクセスして呼び出す必要があ...

JSにおけるデータ型の正しい判定方法の例

目次序文typeof は型を正しく判別できますか? instanceof は型を正しく判別できますか...

Centos6.5 で MySQL 5.7.19 をインストールして設定する方法

Centos6.5にmysql5.7.19をインストールするための詳細な手順は次のとおりです。 1....

Nginx フォワードプロキシとリバースプロキシの違いと原理分析

1. フォワードプロキシとリバースプロキシの違いフォワード プロキシはクライアントのプロキシとして機...

CSS セレクタのグループ化の簡単な分析

セレクタのグループ化h2 要素と段落の両方を灰色にしたいとします。これを行う最も簡単な方法は、次のス...

MySQLアラームの詳細な分析と処理

最近、あるサービスにアラームが発生し、耐えられなくなっています。アラーム情報は次のとおりです。メトリ...

vue-video-player でのブレークポイント再開の実装

最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...

WIN10 システムと Docker 内部コンテナ IP 間の通信方法

1. Windows 版の Docker をインストールしたら、Docker クイックスタート ター...

MySQLのExcelへのエクスポート方法の分析

この記事では、MySQL を使用してデータを Excel にエクスポートする方法について説明します。...

crontab の実行結果を電子メールでユーザーに通知する方法

症状Centos7 ホストに crontab タスクを設定しましたが、時間が来るとメールを実行して「...

vue-cli の紹介とインストール

目次1. はじめに2. vue-cli の紹介2.1 コマンドライン2.2 CLI サービス2.3 ...

Vueコンポーネント登録方法の解釈

目次概要1. グローバル登録2. 現地登録3. モジュールシステムへのローカル登録概要コンポーネント...

ドメイン名を nginx サービスにバインドする方法

nginx.conf で複数のサーバーを設定します。 http リクエストを処理する際、nginx ...