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

13068 ワード
vue.js テキストリンク
板橋隊長張基孝のVuejs入門基礎授業を聞いて、内容を整理しました.
毎日20分ちょっとVuejs頑張れ.
IDE: Visual Studio Code
クロムビュー開発者ツール:Vue.js devtools

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


前回のレッスンでは、グローバル構成部品を作成しました.
構成部品名と構成部品コンテンツのKey Valueペアを作成します.
名前は「app-content」
内容はdivラベルです.
ここでコンポーネントを作成することに注意してください.
Vue.component('app-content',{
	template: '<div>content</div>'
})
ゾーン構成部品の形状について説明します.グローバルエレメントと同様にkey-valueの形状をします.
new Vue()ルートビューインスタンスで作成します.

ゾーン構成部品を作成し、画面に登録する


app-footerという逆コンポーネントを作成し、#appに登録します.
       new Vue({
           el: '#app',
           components:{ // 지역컴포넌트 
               'app-footer': {
                   template: '<footer>footer</footer>'
               }
           }
       })

開発者ツールの表示を開くと、AppFooterはRootコンポーネントの下にあります.

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


グローバル構成部品


Vue.component()として登録します.
このように記述されるのは、プラグインまたはライブラリの形式でグローバルに使用される構成部品のみです.
複数のインスタンスで共通です.
Vue.component('컴포넌트 이름 ',{
	컴포넌트 내용
})

ゾーン構成部品


成分として登録する.
ふくすうがた
通常、複数の構成部品がアセンブリとして登録されるため、アセンブリとして合成されます.
領域コンポーネントは、下部に何が登録されているかを知ることができます.
特定のインスタンス内でのみ使用できます.
       new Vue({
           components:{ // 지역컴포넌트 
               '컴포넌트 이름': 컴포넌트 내용
           }
       })

構成部品とインスタンスの関係


グローバルコンポーネントapp-headerとゾーンコンポーネントapp-footerを比較します.
<body>
    <div id="app">
        <!-- 여기가 뷰 인스턴스의 유효 범위 -->
        <app-header></app-header>
        <app-footer></app-footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 전역 컴포넌트  Vue.component('컴포넌트 이름', {컴포넌트 내용})
        Vue.component('app-header', {
            template: '<h1>Header</h1>'
        });
        
       new Vue({
           el: '#app',
           components:{ // 지역컴포넌트 
               'app-footer': {
                   template: '<footer>footer</footer>'
               }
           }
       }) 
    </script>
</body>
</html>
新しいビューインスタンスを作成し、app 2ラベルに登録します.
app 2ラベルにグローバルコンポーネントapp-headerとゾーンコンポーネントapp-footerを登録します.
<body>
    <div id="app">
        <!-- 여기가 뷰 인스턴스의 유효 범위 -->
        <app-header></app-header>
        <app-footer></app-footer>
    </div>

    <div id="app2"> <!-- 새로운 뷰 인스턴스의 유효 범위 -->
        <app-header></app-header>
        <app-footer></app-footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 전역 컴포넌트 
        Vue.component('app-header', {
            template: '<h1>Header</h1>'
        });

       new Vue({
           el: '#app',
           components:{ // 지역컴포넌트 
               'app-footer': {
                   template: '<footer>footer</footer>'
               }
           }
       }) 

       new Vue({ // 새로운 루트 인스턴스 
           el: '#app2'
       })
    </script>
</body>
開発者ツールを展開すると、新しいルートインスタンスが表示されます.
ただし、app 2に追加されたapp-footer素子は表示されません.

開発者ツールコンソールにエラーを表示します.
app-footerという名前の領域を認識できません

app-footerコンポーネントは、逆コンポーネントであるため、appタグを使用するインスタンス内でのみ使用できます.
グローバル構成部品は、すべてのインスタンスで使用できます.
ゾーン構成部品は、特定のインスタンスでのみ使用できます.
次の授業では素子通信を勉強します.
ウェブパック、バベルとモカで
Linuxコマンドを毎日1つ学ぶ(92):chkconfig