Vue组件全局注册和局部注册使用

小知识点：
1.template：覆盖原dom；需要有一个根元素，把所有元素包裹在一个元素里面

2.el如果匹配了多个dom节点，只会对第一个匹配的节点有效

正文：
1.组件是可复用的 Vue 实例，也有data、methods、computed、watch等选项，但没有像el这样的根实例特有的选项；

2.其中的data必须是函数，将写在new创建的实例的data选项，以return的方式传递给该组件创建的实例；因为每用一次组件，都会创建出新的实例；
每次使用该组件，都独立维护一份data数据，不能因某一个实例修改data而影响其他实例维护的data

3.每个组件必须有且只有一个根元素，如用一个div包裹这些子元素

全局注册：
1.全局注册要写在创建Vue实例对象前

2.全局注册的组件可在任意Vue根实例里使用

3.可以在vue实例绑定的dom节点下，直接写成自定义标签：

<my-component></my-component>

4.可以在创建另一个Vue实例时，写在其template里（这样做依然会覆盖该Vue实例下el绑定的dom元素），就可以渲染出定义的组件

5.举例：

#app, #app2 {
    border: 1px solid black;
}
#app3 {
    color:red;
}

<div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<div id="app2">
    <my-component></my-component>
</div>
<div id="app3">
    <div id="app4"></div>
</div>

Vue.component("my-component",{
    template:"<div @click='count++'>{{count}}</div>",
    data: function(){
        return {count:0}
    }
})
let vm1 = new Vue({
    el:"#app"
})
let vm2 = new Vue({
    el:"#app2"
})
let vm3 = new Vue({
    el:"#app4",
    template:"<my-component></my-component>"
})

局部注册：
哪个Vue实例注册了这个组件，只能这个实例的el匹配的元素范围内使用这个组件

<div id="app2">
    <ccy-component></ccy-component> <!--局部-->
    <my-component></my-component> <!--全局-->
</div>

new Vue({
        el:"#app2",
        components:{
            "ccy-component":{
                "template":"<div>321</div>"
            }
        }
    })

命名：
1.一般组件名命名为：你的名字 - 组件名，防止和别人的组件/原生组件串名
2.在局部组件中，组件名可以写成首字母大写式CcyComponent（驼峰式也可以），但在html中写成标签时只能用横杆ccy-component，否则模板不生效

举例：
vue实例中注册时可以用首字母大写式：

let vm2 = new Vue({
    el:"#app2",
    components:{
        "CcyComponent":{
            "template":"<div>321</div>"
        }
    }
})

html标签名要写成横杆连接式，否则模板不生效：

<div id="app2">
    <ccy-component></ccy-component>
    <my-component></my-component>
</div>

html标签名用首字母大写式：

<div id="app2">
    <CcyComponent></CcyComponent>
</div>

不能渲染出div标签，以及内容321

全局注册和局部注册的小demo：

<div id="app">
    <ccy-input></ccy-input>
    <ccy-movies></ccy-movies>
</div>

// 全局组件
Vue.component("ccy-movies", {
    template: "<ul><li v-for='movie in moviesList'>{{movie.name}}</li></ul>", 
    data: function () {
        return {
            moviesList: [
                { name: "刺杀小说家" },
                { name: "你好李焕英" },
                { name: "哪吒重生" }
            ]
        }
    }
})
new Vue({
    el: "#app",
    components: {
        "ccy-input": {
            template: "<div><input type='text' v-model:value='num'><div>{{num}}</div></div>", // input输入框与num双向绑定
            data: function () {
                return { num: 123 }
            }
        } // 局部组件
    }
})