组件的注册及使用

在使用组件时需要注意以下几点：

构造 Vue 实例时传入的各种选项大多数都可以基于原格式在组件里使用，只有一个例外：data必须是函数，同时这个函数要求必须返回一个对象

组件模板template

必须是单个根元素

支持模板字符串形式

组件名称命名方式

短横线方式（推荐）

my-component

大驼峰方式（只能在其他组件模板字符串中使用，不能在HTML模板中直接使用）

MyComponent

大驼峰式组件名不能在HTML模板中直接使用，如果需要在HTML模板中使用，需要将其进行特定规则转化：

首字母从大写转为小写，后续每遇到大写字母都要转化成小写并且在转化后的小写字母前加-

例如，WoDeZuJian这个大驼峰组件名在HTML中使用的时候需要写成wo-de-zu-jian

全局组件

component()的第一个参数是组件名（实则可以看作是HTML标签名称）

第二个参数是一个对象形式的选项，里面存放组件的声明信息。

全局组件注册后，任何Vue实例都可以使用。

<div id="app">
    <!-- 使用abc组件 -->
    <abc></abc>
    <abc />
</div>
<script src="./js/vue.js"></script>
<script>
    // 定义全局组件abc
    Vue.component("abc", {
        data: function () {
            return {
                msg: "我是全局组件中的msg",
            };
        },
        template: `<div><h2>{{msg}}</h2></div>`,
    });
    // 相当于以后工程化中的根组件
    new Vue({
        el: "#app",
        data: {
            msg: "我是vue实例中的msg",
        },
    });
</script>

局部组件

局部组件定义后只能在当前注册它的Vue实例中使用，

其是通过某个 Vue 实例/组件的实例选项 components 注册。

<div id="app">
    <abc></abc>
    <myzujian></myzujian>
</div>
<script src="./js/vue.js"></script>
<script>
    Vue.component("aaa", {
        data: function () {
            return {
                msg: "我是全局组件中的msg",
            };
        },
        template: `<div><h2>{{msg}}</h2></div>`,
    });

    // 定义变量（局部组件）
    var abc = {
        data: function () {
            return {
                msg: "我是局部组件中的msg",
            };
        },
        template: `<div><h2>{{msg}}<aaa></aaa></h2></div>`,
    };

    new Vue({
        el: "#app",
        data: {
            msg: "vue实例中的msg",
        },
        // 注册为局部组件
        components: {
            abc, //abc:abc
            myzujian: abc,
        },
    });
</script>