概要コンポーネント化の概念により、フロントエンド ページの開発に明確な構造が与えられます。 Vue のコンポーネントは、Vue のインスタンス オブジェクトです。したがって、Vue コンポーネントの構築オプションは、Vue インスタンスを構築するための new Vue() メソッドの構築オプションと同じであり、許容される構築オプションも同じです。 el などのルートインスタンス固有のオプションを除きます。ただし、Vue コンポーネントは再利用可能である必要があるため、構築オプションのデータ オプションはオブジェクトを返す関数である必要があります。 コンポーネントの再利用性を確保するために、データ オプションをオブジェクトを返す関数にできるのはなぜですか? new Vue() メソッドを使用して Vue インスタンスを作成する場合でも、Vue コンポーネントを定義して Vue インスタンスを作成する場合でも、実行される操作は、構築オプションのプロパティ値を新しく作成された Vue インスタンス オブジェクトに直接割り当てることです。コンポーネントの再利用とは、Vue が同じ構築オプションを使用して、同じ名前だがアドレスが異なる複数の Vue インスタンス オブジェクトを構築することを意味します。 Vue コンポーネントを定義するときの構築オプションのデータ オプションがオブジェクトである場合、データ オブジェクトのアドレスがコンポーネントの Vue インスタンスに直接割り当てられるため、コンポーネントが再利用されると、複数のコンポーネントがデータ オブジェクトを共有することになります。ただし、コンポーネントを定義するときのデータ オプションが関数の場合、Vue は構築オプションに従ってコンポーネントを作成するときに関数を実行し、オブジェクトを取得します。このように、データ オブジェクトは Vue インスタンスが作成されるたびに再生成されます。そのため、複数のコンポーネントはそれぞれ独自のデータ オブジェクトを持ち、互いに影響を与えることはありません。 実際には、コンポーネントが登録されると、コンポーネントの構築オプションが定義され、コンポーネントが使用されるときに対応する Vue コンポーネント インスタンスが実際に作成されます。 1. グローバル登録グローバルに登録されたコンポーネントは、Vue ルートインスタンスとすべての子コンポーネントで使用できます。登録エントリは Vue.component() 関数です。一度登録しておけばいつでも使用できます。登録方法は以下の通りです。 Vue.component('コンポーネント名', { オプション }) 次に例を示します。 //メイン.js //この例は、vue-cli で作成されたプロジェクトです。デフォルトでは vue の不完全なバージョンであり、テンプレート オプションは使用できないため、render 関数を使用してコンポーネント コンテンツを書き込みます。 Vue.component('all-test',{ データ(){ 戻る { x: 「私はグローバルコンポーネントです」 } }, レンダリング(h){ h('div',this.x) を返します } }) //グローバルに登録されたコンポーネントは直接使用できます //App.vue <テンプレート> <div id="アプリ"> <全テスト /> </div> </テンプレート> 2. 現地登録ローカル登録では、プレーンな JavaScript オブジェクトを介してコンポーネントを定義します。次に、コンポーネントに名前が付けられ、Vue インスタンス構築オプションのコンポーネント オプションに登録されます。 コンポーネント = { オプション } //new Vue はルート要素 Vue インスタンスを作成します new Vue({ el: '#app' コンポーネント: 'my-component-name': コンポーネント } }) //または、Vueコンポーネントによって作成されたVueインスタンスを登録します export default { コンポーネント: 'my-component-name': コンポーネント } } 次に例を示します。 //アプリ.vue <テンプレート> <div id="アプリ"> <全テスト /> <コンポーネント-a /> <コンポーネント-b /> </div> </テンプレート> <スクリプト> ComponentA = { データ(){ 戻る { x: 「私はローカルコンポーネントAです」 } }, レンダリング(h){ h('div',this.x) を返します } } エクスポートデフォルト{ 名前: 'アプリ'、 コンポーネント: 'コンポーネント-a': コンポーネントA、 'コンポーネント-b': { データ(){ 戻る { x: 「私はローカルコンポーネントBです」 } }, レンダリング(h){ h('div',this.x) を返します } } } } </スクリプト> 3. モジュールシステムへのローカル登録Babel や webpack などのモジュール システムでは、import と export を使用して、コンポーネント構築オプション オブジェクトまたは構築オプションに対応する *.vue ファイルをインポートできます。 //c.js エクスポートデフォルト{ データ(){ 戻る { x: '私はc.jsファイルによって個別にエクスポートされたコンポーネント構築オプションオブジェクトです' } }, レンダリング(h){ h('div',this.x) を返します } } //D.vue <テンプレート> <div> {{x}} </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ(){ 戻る { x: '私はD.vueファイルによってエクスポートされたコンポーネントです' } } } </スクリプト> //アプリ.vue <テンプレート> <div id="アプリ"> <C /> <D /> </div> </テンプレート> './c.js' から C をインポートします './components/D.vue' から D をインポートします。 エクスポートデフォルト{ 名前: 'アプリ'、 コンポーネント: C、 だ } } </スクリプト> 以上がVueコンポーネント登録方法の詳細な解説です。Vueコンポーネント登録方法についての詳細は、123WORDPRESS.COMの他の関連記事にも注目してください。 以下もご興味があるかもしれません:
|
<<: Ubuntu 基本チュートリアル: apt-get コマンド
>>: Mysql で group_concat の長さ制限を変更する方法
以下は、B+ ツリーのデータ構造と実験結果からの推測に基づいた私の判断です。間違いがあればご指摘くだ...
1. オブジェクトを動的に作成するJavaScript からオブジェクトを動的に作成する方法は 2 ...
1. MySQL マスター/スレーブ同期とは何ですか?マスター データベースのデータが変更されると、...
最近、サーバーのストレステストを再度行う必要が出てきました。ここでは、最近学んだ見積もりスキームと見...
nginx.conf で複数のサーバーを設定します。 http リクエストを処理する際、nginx ...
多くの場合、クエリの結果は最大で 1 つのデータ レコードになることが予想されます。この場合、制限 ...
Vue3.0 がリリースされてからしばらく経ちましたが、勉強を始める必要があります。まず、達成したい...
質問Nginx は $remote_addr を実際の IP アドレスとして受け取りますが、実際には...
目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...
目次setState は同期ですか、それとも非同期ですか?カスタム合成イベントと React フック...
序文SQL の言語分類には主に以下の種類があります。 DDLデータ定義言語作成、削除、変更データ定義...
この記事では、テーブルを動的に読み込み、削除するためのJavaScriptの具体的なコードを参考まで...
Vueドロップダウンリストの2つの実装最初の方法はv-forを使用する <el-select ...
Mysqlはブール型を設定します1. Tinyintタイプテストテーブルを作成し、blフィールドをブ...
序文最近、CentOS 7 で MySQL 5.7.23 をアップグレードする際に落とし穴を発見しま...