注册组件的基本步骤：

组件使用分成三个步骤：

一.创建组件构造器 Vue.extend()

二.注册组件  Vue.component()

三.使用组件

 

当我们通过调用Vue.component()注册组件时，组件的注册是全局的

如果我们注册的组件是挂载在某个实例中，那么就是一个局部组件

　　

注册全局组件写法：

<body>
        <!-- 步骤三.使用组件 -->
        <div id="app">
                <cpn></cpn>
        </div>

    <script>
        //步骤一.调用Vue.extend()创建组件构造器
        const myapp=Vue.extend({
            template:`
                <div>
                <h2>组件标题</h2>
                <p>我是组件中的一个段落内容</p>
                </div>
            `
        });
        // 步骤二.Vue.component()注册组件，并且定义组件标签的名称
        //传两个参数：1.注册组件的标签名 2.组件构造器
        Vue.component('cpn',myapp)
        let app= new Vue({
            el:"#app"
        })
    </script>
</body>

　

注册局部组件的写法：

<body>
　　<!-- 组件必须挂载在某个Vue实例下，否则不会生效 -->
       <div id="test">
                <allcpn></allcpn>
        </div> 

    <script>
        //注册的组件是挂载在某个实例中，那么就是一个局部组件
        const allapp=Vue.extend({
            template:`
                <div>
                <h2>局部组件标题</h2>
                <p>局部组件方法</p>
                </div>
            `
        });
        let test1=new Vue({
            el:"#test",
            components:{
                'allcpn':allapp
            }
        })

    </script>
</body>