[Vue.js]ベース-ビュー構成部品

28895 ワード
vue.js テキストリンク

1.構成部品の登録


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


Vue.コンポーネント("構成部品名",{
   //構成部品の内容
}

1.2ゾーン構成部品の登録


new Vue({
   components: {
       '「構成部品名」:構成部品の内容
   }
})

[インスタンス有効範囲とゾーン構成部品、グローバル構成部品の関係の例]


2番目の例では、ローカル構成部品が登録されていないため、エラーが表示されます.
<html>
    <head>
        <title>인스턴스 유효 범위와 지역 컴포넌트, 전역 컴포넌트 간 관계 확인 예제</title>
    </head>
    <body>
        <div id="app">
            <h3>첫 번째 인스턴스 영역</h3>
            <my-global-component></my-global-component>
            <my-local-component></my-local-component>
        </div>      
        <hr>
        <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>

2.ビュー構成部品通信


親と子の間でデータを渡す基本構造は次のとおりです.

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


Vue.component('child-component', {
   props:[[propsプロパティ名],
}

propsは、親コンポーネントからサブコンポーネントにデータを渡すときに使用されるプロパティです.
1)サブエレメントを登録する場合、propsプロパティを使用してサブエレメントが使用するプロパティを指定します.
2)child-componentタグで、v-bind属性の左側値1)で指定した属性を指定し、右側の値に渡す親要素のデータ属性を指定します.

[親から子へのデータ転送の例]

<html>
    <head>
        <title>상위에서 하위 컴포넌트로 데이터 전달 예제</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>

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


Vueは、アンカーの双方向データバインディングと反応器の一方向データストリームの利点を組み合わせたフレームワークであり、親コンポーネントから子コンポーネントへのデータの一方向のみを転送する構造であるため、子コンポーネントから親コンポーネントへのデータの転送はできない.
サブコンポーネントから親コンポーネントへの通信は、イベントを励起し、親コンポーネントに信号を送信することができる.親構成部品は、子構成部品の特定のイベントを受信することによって親構成部品を呼び出す方法です.
イベントの発生と受信は$emit()とv-onプロパティを使用して実現される.
//事件発生
this.$Emit(「アクティビティ名」);
$emitを呼び出すと、カッコで定義されたイベントが発生します.また、通常$emit()が呼び出される場所は、サブコンポーネントの特定のメソッドの内部である.したがって、$emit()を呼び出すときに使用されるthisは、サブコンポーネントを指します.
//受信イベント

[子から親コンポーネント間のイベントの励起と受信の例]

<html>
    <head>
        <title>하위-상위 컴포넌트간 이벤트 발생 및 수신 예제</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('received an event');
                    }
                }
            });
        </script>
    </body>
</html>

2.3無関係コンポーネント間通信-イベントバス


イベントバスは、コンポーネント間の親子構造を維持することなく、開発者が指定した2つのコンポーネント間でデータを交換する方法です.
イベントバスではpropsプロパティを使用することなく、必要なコンポーネント間で直接データを転送できるので便利ですが、コンポーネントが増えると、どこからどこへ送信するか管理できないという問題が発生します.この問題を解決するには、Vuexというステータス管理ツールが必要です.
//イベントバスの追加インスタンスを作成
var eventBus = new Vue();
//イベントを送信するコンポーネント
methods: {
   メソッド名:function(){
       eventBus.$Emit(「アクティビティ名」、「データ」)
   }
}
//イベントを受信する構成部品
methods: {
   created: function() {
       eventBus.$on(「イベント名」,function(データ)){0}
           ...
       });
   }
}
イベントバスを実装するには、論理を含むインスタンスとは異なる新しいインスタンスを作成します.
生成されたインスタンスを使用してアクティビティを送信および受信します.
送信された構成部品には.$Emit()は、受信素子から.$具現論

[イベントバスの例]

<html>
    <head>
        <title>이벤트 버스 예제</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>',
                methods: {
                    showLog: function() {
                        eventBus.$emit('triggerEventBus', 100);
                    }
                }
            });
            
            // 인스턴스
            new Vue({
                el: '#app'
                created: function() {
                    eventBus.$on('triggerEventBus', function(value) {
                        console.log("이벤트를 전달받음. 전달받은 값 : ", value);
                    });
                },
            });
        </script>
    </body>
</html>

# Books

  • Do it! Vue.js入門例題は実戦プロジェクトが完成したことを理解します![張基孝著Izzie Publishing]
    • SqlServerメモリボトルネック分析--SQLServer:Buffer Manager
    URIおよびWebブラウザ要求フロー