Vue初學14-組件的基本使用

組件化開發可以實現模塊化，提高代碼複用率，而且界面會更加整潔。

組件使用的步驟：

1. 創建組件
2. 註冊組件
3. 使用組件

全局組件

注意一種es6新語法``,位於tab鍵上方，可以在``中間寫html或文本，支持換行不用加+

    <script src="../js/vue.js"></script>
     <div id="app">
         <!--使用全局組件-->
         <mycpn></mycpn>
     </div>
    <script>
        //創建全局組件
        const cpn = Vue.extend({
            template:`
                <div>
                <h1>我是標題</h1>
                <p>我是內容</p>
                </div>`
        });
        //註冊組件,組件id爲mycpn
        Vue.component('mycpn',cpn);
        //vue綁定管理的div
        const vue=new Vue({
            el:'#app'
        });
    </script>

效果如下： 

局部組件

上述組件是在全局範圍內註冊的，可以在全局範圍內使用。

如果有多個vue分別綁定了多個div，也都可以使用mycpn組件，不過一般只有一個vue。

如果想讓組件在局部使用，例如在id=app的div內部使用，可以註冊成局部組件。

<script src="../js/vue.js"></script>
     <div id="app">
         <!--使用全局組件-->
         <mycpn></mycpn>
         <!--使用局部組件-->
         <mycpn2></mycpn2>
     </div>
    <script>
        //創建全局組件
        const cpn = Vue.extend({
            template:`
                <div>
                <h1>我是標題</h1>
                <p>我是內容</p>
                </div>`
        });
        //註冊全局組件,組件id爲mycpn
        Vue.component('mycpn',cpn);

        //創建局部組件
        const cpn2 = Vue.extend({
            template:`
                <div>
                <h1>我是局部標題</h1>
                <p>我是局部內容</p>
                </div>`
        });

        //vue綁定管理的div
        const vue=new Vue({
            el:'#app',
            //註冊局部組件，只在app內部使用
            components:{
                mycpn2:cpn2
            }
        });
    </script>

效果如下：

 父組件和子組件

此時，子組件的註冊是在在父組件的內部，因此子組件不能單獨使用，只能在父組件的內部使用。

    <script src="../js/vue.js"></script>
     <div id="app">
         <!--使用組件-->
         <mycpn></mycpn>
     </div>
    <script>

        //創建子組件
        const cpn2 = Vue.extend({
            template:`
                <div>
                <h1>我是子標題</h1>
                <p>我是子內容</p>
                </div>`
        });

        //創建父組件,子組件的註冊和使用都是在父組件內部
        const cpn = Vue.extend({
            template:`
                <div>
                <h1>我是標題</h1>
                <p>我是內容</p>
                <cpn2></cpn2>
                </div>`,
            components:{
                cpn2:cpn2
            }
        });
        //註冊父組件,組件id爲mycpn
        Vue.component('mycpn',cpn);

        //vue綁定管理的div
        const vue=new Vue({
            el:'#app'
        });
    </script>

效果如下：