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データベースに画像を保存するいくつかの方法

通常、ユーザーがアップロードした写真はデータベースに保存する必要があります。一般的に、解決策は 2 ...

WindowsはVMwareを使用してLinux仮想マシンを作成し、CentOS7.2オペレーティングシステムをインストールします。

目次1. ウィザードに従って仮想マシンを作成します2. オペレーティングシステムをインストールします...

Chrome 4.0 は GreaseMonkey スクリプトをサポートします

GreaseMokey (中国語では Grease Monkey Script と呼んでいます) は...

@Font-face の基本的な使い方と、すべてのブラウザと互換性を持たせる方法

@Font-face 基本紹介: @font-face は、Web ページにカスタム フォントを表示...

dockerエラーの原因分析 終了しました (1) 4分前

Dockerエラー1. 原因を確認するdocker ログ ネクサス2. エラーの原因OpenJDK ...

Linux のメモリ管理とアドレス指定の詳細な紹介

目次1. コンセプトメモリ管理モード住所種別分類例: 2. ページ管理x86 アーキテクチャ 32 ...

React NativeのScrollViewプルダウンリフレッシュ効果

この記事では、React Native ScrollViewのプルダウンリフレッシュ効果の具体的なコ...

MySQLのトランザクションとデータ一貫性処理の問題を分析する

この記事では、セキュリティ、使用方法、同時処理などを通じて、MySQL トランザクションとデータの一...

MySQLクエリ最適化: 100万件のデータに対するテーブル最適化ソリューション

1. 2つのクエリエンジン(myIsamエンジン)のクエリ速度InnoDB はテーブル内の特定の行数...

Nginx 500 内部サーバーエラーの解決方法

今日、Nginxを使っていたら500エラーが発生しました。エラーコードを検索してみんなに共有しました...

Docker データボリュームの一般的な操作コードの例

開発者が Dockerfile を使用してイメージをビルドする場合は、イメージをビルドするときにデー...

Dockerコンテナ間の通信と外部ネットワーク通信の操作

コンテナ間の通信1. コンテナのネットワーク共有このモードの Docker コンテナはネットワーク ...

ES6 ループと反復可能オブジェクトの例

この記事では、ES6 の for ... of ループについて説明します。古い方法以前は、JavaS...

MySQL クエリのソートとクエリ集計関数の使用法の分析

この記事では、例を使用して、MySQL クエリのソート関数とクエリ集計関数の使用方法を説明します。ご...