全局组件和局部组件

组件

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是  <my-com>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

全局组件:

<div id="box">
    <my-com></my-com>//如果创建的组件使用大驼峰命名法，此处需要用"-"链接
</div>

//创建全局组件
Vue.component('myCom',{
    template:'<div>cc</div>'//此处为根元素,只能有一个,如果多写或者不写，
    报错:
        Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
    翻译:组件模板应该只包含一个根元素。如果在多个元素上使用v-if，则使用v-else-if来链接它们。
    
})

//实例化Vue
    new Vue({
        el:'#box'
    })

最后:【此时页面上则显示组件根元素上的内容cc】

局部组件

        <div id="box">
            <com1 :c="123"></com1>//绑定vue实例中的数据的c值
            <com1></com1>
        </div>
    <!-- 定义局部组件 -->
        var com1 = {
            props: ['c'],//父组件向子组件传过来的值
            template:`
            <div>abc231
                {{a}}
                {{c}}
            <button @click="inc">+</button>
            </div> `,
注意事项1：
    【数据data必须为函数类型,其返回值必须使用return返回一个对象形式，只有这样外面才可以调用,因此每个实例可以维护一份被返回对象的独立的拷贝：】
            data() {
                    return {
                        a: 1
                    }
                },
            方法：点击++
                methods: {
                    inc() {
                        this.a++
                    }
                }
            }
注意事项:2
    定义一个组件，此组件要与局部组件的名相一致，否则会报错(局部组件.html:46 Uncaught ReferenceError: com is not defined
    at),如果html的标签名与组件名不一致，会显示(vue.js:634 [Vue warn]: Unknown custom element: <com> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
    (found in <Root>)) 
        new Vue({
            el: '#box',
            components: {
                com1
            }
        })