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

推薦する

Linux ファイル/ディレクトリの権限と所有権の管理

1. ファイルの権限と所有権の概要1. アクセス権Read r: ファイルの内容を表示し、ディレクト...

Mac M1 での Nginx のマルチサイト構成の実装

注: nginxはbrew経由でインストールされますウェブサイトのルートディレクトリ: /opt/h...

CentOS に Nginx をインストールする方法

公式ドキュメント: https://nginx.org/en/linux_packages.html...

コードレイン効果を実現するJavaScriptキャンバス

この記事では、コードレイン効果を実現するためのキャンバスの具体的なコードを参考までに共有します。具体...

JavaScriptはキャンバスを使用して座標と線を描画します

この記事では、JavaScriptでキャンバスを使用して座標と線を描く具体的なコードを参考までに紹介...

複数の無関係なテーブルからデータをクエリし、MySQL でページングする方法

MySQL 複数の無関係なテーブルクエリデータとページング機能要件主キーと外部キーの関連付けがない ...

Dockerコンテナでルート権限を取得する方法

まず、コンテナが稼働している必要がありますコンテナのCONTAINER IDは、sudo docke...

MySQLがフルテーブルスキャンを実行するいくつかの状況

目次ケース1:ケース2:ケース3:簡単にまとめると:過去 2 日間で、完全なテーブル スキャンを引き...

マークアップ言語 - 印刷スタイルシート

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

ページ リファクタリング スキル - Javascript、CSS

JS、CSSについてCS: ...上部のスタイルシートCSS式を避ける外部JS、CSSの使用JSと...

JavaScript クロージャの説明

目次1. クロージャとは何ですか? 2. クロージャの役割2.1) メモリ2.2) プライベート変数...

React diffアルゴリズムソースコード分析

目次単一ノード差分単一要素を調整するマルチノード差分調整子配列ノードが移動したかどうかを判断するには...

MySQL データ型の選択原則

目次小さいけれど美しいシンプルにNULL値を避けるデータタイプを選択する手順データ型の紹介1. 文字...

ウェブページを白黒に変換します(Google、Firefox、IE、その他のブラウザと互換性があります)

CSSファイルに書き込むコードをコピーコードは次のとおりです。 01.html {グレイスケール(1...

MySQLは「order by」がどのように機能するかを簡単に理解します

並べ替えの場合、order by は非常に頻繁に使用するキーワードです。インデックスに関するこれまで...