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>
           

效果如下：