vue中创建组件的几种方法

最近一直在学习vue.js，看了一些视频还有官方文档，但是发现，在官方文档中所讲解的有关vue组件相关的内容不是很好理解，因此根据我本人的一些理解，将vue中创建组件的方法写下来(如有相同，纯属巧合)。

一.关于vue的组件的创建(全局组件，局部组件)
1.全局组件
全局组件，我们一般用Vue.component({});来注册。
例子如下：

<div id="components-demo">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>

    <blog-post title="my journey with Vue1"></blog-post>
    <blog-post title="my journey with Vue2"></blog-post>
    <blog-post title="my journey with Vue3"></blog-post>
</div>
``

Vue.component('button-counter',{
    data:function () {
        return{
            count: 0
        }
    },
    template: '<button @click="count++">You clicked me {{ count }} times.</button>'
});

Vue.component('blog-post',{
    props:['title'],
    template:'<h3>{{ title }}</h3>'
});

var vm1 = new Vue({
    el: '#components-demo',
    data:{

    },
    methods:{
    }
});

结果：![上述代码的结果](https://img-blog.csdnimg.cn/20190813135328740.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM3NjYzOQ==,size_16,color_FFFFFF,t_70)



全局创建组件表示，该组件可以在这个vue文件中的任何一个作用域内使用。

2.局部组件、
	局部组件与全局组件的不同之处在于，局部组件只能在创建该组件所在的作用域内使用。
	下面表示出局部组件创建的4种方式(个人认为第4种比较方便)
	

```

<!--第四种创建局部组件的方式-->
<template id="tmp1">
    <div>
        <h1>这是我创建的第四个组件</h1>
    </div>

</template>

 //第一种创建局部组件的方式
    var myComponent1 = {
        template: '<div>this is a component1!</div>'
    };
    //第二种创建局部组件的方式
    var myComponent2 = Vue.extend({
        template: '<div>this is a component2!</div>'
    });


    var vm = new Vue({
        el : "#app",
        data : {
            msg : "123456",
            count: 0,
            msg1 : '5555',
            rawHtml:"<h1>haha</h1>",
            seen: false,
            message: "cdsa cid qwo gfdjskl",
            items:[
                {message:"111"},
                {message:"222"},
                {message:"333"}
            ],
            object:{
                title:"123456",
                name:"liu",
                age:"22",
                school:"beijing"
            },

        },
        methods : {
            push1:function () {
                return this.items.push({message:"123"});
            },
            pop:function () {
                return this.items.pop()
            },
            shift:function () {
              return this.items.shift()
            },
            unshift:function () {
                return this.items.push({message:"fdsac"});
            },
        },
        computed:{
            reversedMessage:function () {
                return this.message.split(' ').reverse().join(' ');
            }
        },
        components:{
            'myComponent1': myComponent1,
            'myComponent2': myComponent2,
            //第三种创建局部组件的方式
            'myComponent3':{
                template:"<h2>这是我创建的第三个组件</h2>"
            },
            //第四种创建局部组件的方式（对应上面）
            'myComponent4':{
                template:"#tmp1"
            }
        }

    })

因为在我们自己创建的组件中不能包含多个标签，所以我们的组件所包含的标签都需要在一个div下，因此第4中方法，个人觉得比较方便。
还有注意的一点就是，如果将局部组件放在不属于它的作用域内使用时会报错，例如：

<div id="components-demo">

    <my-component1></my-component1>
</div>

也使用的上述代码，上述组件时在#app这个作用域内创建的，如果我将上述创建的组件放在#components-demo中，
将会出现“[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.
(found in )”该错误。

上述的内容，是我根据自己的理解写的一点总结，随着学习的深入，我将继续更新有关我所遇到的Vue的一些问题，或者个人理解。