概要コンポーネント化の概念により、フロントエンド ページの開発に明確な構造が与えられます。 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 の長さ制限を変更する方法
目次ウェブパック5公式スタート建築ガイド構築を開始する依存する準備が完了したら、プロジェクトの構築を...
1. スケジュールタスクを作成する命令crontab -eは現在のユーザーの編集インターフェースに入...
1. インストールパッケージをダウンロードするインストール パッケージは次の場所にあります:参考:...
昨日、パソコンにPHP開発環境をセットアップした後、Apacheサーバーを再起動するとエラーが続きま...
1. 現在の日付 DATE_SUB(curdate(),INTERVAL 0 DAY) を選択します...
導入前回の記事では、axios のシンプルなカプセル化と、axios インターセプターの適用シナリオ...
序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...
この記事では、WeChatアプレットで写真を撮ったり、アルバムから写真を選択したりするための具体的な...
最近では、特定のフォルダ内の特定のファイルを自動的に検索する必要があり、ファイルパスとファイル名を別...
この記事では、タブ切り替え機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...
webpackjs ファイルをパッケージ化するときに、次に示すように、index.html インタ...
次の図に示すように: Centos 7.0以上であれば問題ありません。現在のシステム カーネル バー...
目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...
目次製品要件アイデア問題ライブラリ選択をドラッグコンポーネントを生成する方法コンポーネントを生成する...
目次コンポーネントインフラストラクチャ目的: 画像拡大鏡機能を実現するvueuseをインストールする...