[Doit!Vue.js]03-2枚~3枚エンディング

47074 ワード

03-2ビュー構成部品

素子とは、スクリーンを構成するブロック(スクリーンの特定領域)を組み合わせて構成することができる.
構成部品の利点
1.高速構造化スクリーン、統一モードで開発
2.リサイクル可能な形で管理し、コードの再利用を容易にする
3.コードの可読性を高める.

各パーティションは構成部品を表します.
左側は、1つのWebページの各領域をロールごとに分割します.
左の図は画面全体をHeader、Content、Footerに分割します.
また、コンテンツ領域をAsideとListに分割する.
左の図は、資料構造ツリーに似た要素間の関係を示しています.

構成部品の登録

構成部品を登録するには、グローバルとゾーンの2つの方法があります.
ゾーン構成部品は特定のインスタンスでのみ有効であり、グローバル構成部品は複数のインスタンスで共通に使用できます.
地域-特定の範囲内
グローバル-複数のインスタンスで共通

グローバル構成部品の登録

ビューライブラリをロードすると、グローバル構成部品はアクセス可能なVue変数を使用して登録されます.
Vue作成者ですべてのインスタンスのグローバル構成部品を登録します.コールcomponent()実行

Vue.component('컴포넌트 이름', {
  	//컴포넌트 내용
});

グローバル構成部品登録フォーマットには、構成部品名と構成部品コンテンツが含まれます.
コンポーネント名はtemplateプロパティ用のHTMLカスタムタグ名です
カスタムラベル:HTML標準ラベルではなくWeb開発者がカスタマイズできるラベル
命名規則は「すべて小文字」と「Kebob Key法」に従う必要はありません.
化学修飾法:変数が単語から組み合わせられている場合、単語と単語の間に-で接続する方法.

<html>
    <head>
        <title>Vue Component Registration</title>
    </head>
    <body>
        <div id="app">
            <button>컴포넌트 등록</button>
            <my-component></my-component> //전역 컴포넌트 표시
        </div>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        <script>
            Vue.component('my-component', {
                template: '<div>전역 컴포넌트가 등록되었습니다.</div>'
            }); // 전역 컴포넌트 등록

            new Vue({
                el: '#app'
            });
        </script>
    </body>
</html>

スクリーン上のグローバル構成部品の表示手順
ライブラリファイルの読み込み->コンポーネントをビュー作成者として登録->インスタンスオブジェクトの作成->特定のスクリーン要素にインスタンスをアタッチ->インスタンスの内容を返す->変換されたスクリーン要素をユーザーが最終的に確認する
インスタンスコンテンツ変換では、が

ゾーン構成部品の登録

ゾーン構成部品登録は、グローバル構成部品登録とは異なり、インスタンスにコンポーネント属性を追加し、登録する構成部品名と内容を定義するだけです.

new Vue({
  components: {
    '컴포넌트 이름': 컴포넌트 내용
  }
});

ゾーン構成部品を登録します.


<script>
  var cmp = {
    // 컴포넌트 내용
    template: '<div>지역 컴포넌트가 등록되었습니다!</div>'
};

new Vue({
  el: '#app'
  components: {
  	'my-local-component': cmp
	}
});
</script>

変数cmpは、画面に表示する要素の内容を定義します.
コンポーネントの内容には、テンプレート、データ、メソッドなどの複数のプロパティが含まれます.
構成部品名:my-local-component
cmpという名前の構成部品の内容を定義する変数を指定します.

ゾーン構成部品とグローバル構成部品の違い

ゾーン構成部品とグローバル構成部品の登録

<html>
    <head>
        <title>Vue Component Registration</title>
    </head>
    <body>
        <div id="app">
            <h3>첫 번째 인스턴스 영역</h3>
            <my-global-component></my-global-component>
            <my-local-component></my-local-component>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        <script>
            Vue.component('my-global-component', {
                template: '<div>전역 컴포넌트입니다.</div>'
            });

            var cmp = {
                template: '<div>지역 컴포넌트입니다.</div>'
            };

            new Vue({
                el: '#app',

                components: {
                    'my-local-component': cmp
                }
            });
        </script>
    </body>
</html>

インスタンスの有効範囲を超えた場合、

<html>
    <head>
        <title>Vue Component Registration</title>
    </head>
    <body>
        <div id="app">
            <h3>첫 번째 인스턴스 영역</h3>
            <my-global-component></my-global-component>
            <my-local-component></my-local-component>
        </div>
        <div id="app2">
            <h3>두 번째 인스턴스 영역</h3>
            <my-global-component></my-global-component>
            <my-local-component></my-local-component>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        <script>
            Vue.component('my-global-component', {
                template: '<div>전역 컴포넌트입니다.</div>'
            });

            var cmp = {
                template: '<div>지역 컴포넌트입니다.</div>'
            };

            new Vue({
                el: '#app',

                components: {
                    'my-local-component': cmp
                }
            });
            new Vue({
                el: "#app2"
            });
        </script>
    </body>
</html>

app 2という新しいインスタンスが作成されました.app 2は、新しいゾーンエレメントを作成するのではなく、appのゾーンエレメントを使用しようとします.

グローバル構成部品は画面に表示されますが、ゾーン構成部品は表示されません.
グローバル構成部品とゾーン構成部品の有効範囲が異なるためです.
2番目のインスタンス領域

03-3ビュー素子通信

構成部品間通信と有効範囲

ビューの場合、画面はコンポーネントで構成されるため、同じページでデータを共有することはできません.
理由-各構成部品には独自の有効範囲があります.

上部/サブ構成部品の関係

最も基本的なデータ転送方法は、親(親)-子(子)コンポーネント間でデータを転送することです.
親-子構成部品とは、ツリー構造で親ノード、子ノードのように、構成部品間の関係が親、子ノードからなる構成部品を指します.
領域またはグローバル構成部品を登録すると、登録された構成部品は自然にサブ構成部品になります.
次に、登録サブ構成部品のインスタンスが親構成部品になります.

propsプロパティを上から下に渡します.
下から基本的にはイベントのみ転送できます.

親から子へのデータの転送

propsプロパティ

propsは、親構成部品から子構成部品にデータを渡すときに使用するプロパティです.
propsプロパティを使用するには、サブコンポーネントのプロパティで定義します.

propsプロパティを使用してデータを渡す例

Vue.component('child-component', {
  props: ['props 속성 이름'],
});

次に、親コンポーネントのHTMLコードに登録されているchild-componentコンポーネントラベルにv-bindプロパティを追加します.

<child-component v-bind:props 속성 이름="상위 컴포넌트의 data속성"></child-component>

v-vindプロパティの左側の値をサブエレメントで定義したpropsプロパティとしてサブエレメントに挿入し、サブエレメントの上部に右側の値で渡すデータプロパティを指定します.

<html>
    <head>
        <title>Vue Component Registration</title>
    </head>
    <body>
        <div id="app">
            <child-component v-bind:propsdata="message"></child-component>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        <script>
            Vue.component('child-component', {
                props: ['propsdata'],
                template: '<p>{{ propsdata }}</p>'
            });

            

            new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue! passed from Parent Component'
                }
            });
            
        </script>
    </body>
</html>

データ移動順序
1.new Vue()を使用したインスタンスの作成
2. Vue.コンポーネント()を使用してサブコンポーネントchlid-componentを登録する
3.child-componentのコンテンツでprops属性を使用してpropsdataを定義する
4.HTMLにコンポーネントラベルを追加したv-bind属性を表示する場合、v-bind:propsdata=「message」は親コンポーネントのmessage属性値HelloVueです!Parent Componentテキストからサブコンポーネントへのpropsdataの転送
5.child-componentのテンプレート属性で定義した

{propsdata}

はHello.である.コンポーネントに変換
ビューインスタンスのデータ属性で定義されたmessage属性をサブコンポーネントpropsに渡す
実際、上記のコードはchild-componentを親コンポーネントを指定せずにグローバルに登録します.
それでも、ビューインスタンスに親コンポーネントが存在するようにpropsをサブコンポーネントとして使用します.
これは、コンポーネントを登録すると同時に、ビューインスタンス自体が親になるためです.
インスタンスに新しい構成部品を登録すると、既存の構成部品は親になり、新しく登録された構成部品は子になります.このようにして新しい構成部品を登録する例を最上位構成部品と呼ぶ.

サブコンポーネントから親コンポーネントへのイベントの転送

イベントの発生と受信

子部品から親部品への通信はイベントを開始し、親部品に信号を送信します.
特定のイベントが発生すると、親コンポーネントはイベントを受信し、親コンポーネントのメソッドを呼び出します.

イベント発生と受信フォーマット

$emit()とv-on:プロパティを使用してイベントの励起と受信を実現

this.$emit('이벤트명');

<child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>

$emit()を呼び出すと、カッコで定義されたイベントが発生します.通常、$emit()を呼び出す溝は、サブコンポーネントの特定のメソッドの内部にあります.したがって、$emit()を呼び出すときに使用されるthisは、サブコンポーネントを指します.
呼び出されたイベントは、登録サブコンポーネントのタグからv-on:を受信します.
v-on:プロパティでは、ステータコンポーネントで発生するイベントの名前を指し、プロパティの値でイベントが発生したときに呼び出される親コンポーネントのメソッドを指定します.

<html>
    <head>
        <title>Vue Component Registration</title>
    </head>
    <body>
        <div id="app">
            <child-component v-on:show-log="printText"></child-component>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        <script>
            Vue.component('child-component', {
                
                template: '<button v-on:click="showLog">show</button>',
                methods: {
                    showLog: function() {
                        this.$emit('show-log');
                    }
                }
            });

            

            new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue! passed from Parent Component'
                },
                methods: {
                    printText: function() {
                        console.log("recived an event");
                    }
                }
            });
            
        </script>
    </body>
</html>

child-componentの「表示」ボタンをクリックしてイベントをトリガーし、発生したイベントを使用して親コンポーネントのprintText()メソッドの例を実行します.

[表示]ボタンをクリックし、イベントv-on:click=[showLog]をクリックしてshowLog()メソッド

を実行します.

showLog()メソッドにはthis.$が含まれています.Emit(「show-log」)実行時にshow-logイベント

が発生する

show-logイベントは、で定義されたv-on:show-logに渡され、ターゲットメソッドprintText()が実行されます.

printText()received an eventというログを出力します.

同一レベルの構成部品通信

ビューは、上から下へデータのみを渡す基本的な通信ルールに従います.したがって、値を隣の構成部品に直接渡すには、下から共通の親構成部品にイベントを渡し、共通の親構成部品からpropsを下に2つのサブ構成部品に渡す必要があります.
ただし、この通信構造を維持する場合は、親コンポーネントを必要としなくても、同じレベルの間に親コンポーネントを強制的に配置する必要があるため、イベントバスを使用します.

非相関コンポーネント間の通信-イベント通信

イベントバスは、開発者が指定した2つのコンポーネント間でデータを交換できます.

イベントバスフォーマット

アクティブバスのフォーマットは次のとおりです.

var eventBus = new Vue();

イベントバスを実装するには、アプリケーションロジックを含むインスタンスではなく、新しいインスタンスを作成し、新しいインスタンスを使用してイベントを送信および受信する必要があります.
送信されました.$Emit()は、受信素子上で$on()を実現する.
イベントを送信するコンポーネント

methods: {
	메서드명: function() {
		eventBus.$emit('이벤트명',데이터);
	}
}

イベントを受信する構成部品

methods: {
	created: function() {
		eventBus.$on('이벤트명', function(데이터) {
			...
		});
	}
}

実装イベント

<html>
  <head>
      <title>Vue Component Registration</title>
  </head>
  <body>
      <div id="app">
          <child-component></child-component>
      </div>

      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
      <script>
          var eventBus = new Vue();
          Vue.component('child-component', {
              template: '<div>하위컴포넌트의 영역입니다.<button v-on:click="showLog">show</button></div>',
              methods: {
                  showLog: function() {
                      eventBus.$emit('triggerEventBus', 100);
                  }
              }

          });

          var app = new Vue({
              el: '#app',
              created: function() {
                  eventBus.$on('triggerEventBus', function(value) {
                      console.log("이벤트를 전달받음, 전달받은 값 : ", value);
                  });
              }
          })
      </script>
  </body>
</html>

「表示」ボタンをクリックしてshowLog()を実行するとeventButのイベントが発生します.
励起されたイベントは、上部コンポーネントのcreated()のeventBus.$on()で受け取ります.
イベントバスではpropsプロパティを使用せずに必要な素子間で直接データを転送できるので便利ですが、素子が増えると、どこからどこへ送信するか管理できないという問題が発生します.

Reference

この問題について([Doit!Vue.js]03-2枚~3枚エンディング), 我々は、より多くの情報をここで見つけました https://velog.io/@gudwnsepdy/Do-it-Vue.js-03-2장-3장-마무리

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Yii2.0メール・チュートリアルの送信

[boj 2407][Python]ユニット