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>

效果如下：