创建全局组件

本节讲解组件的创建方式，组件分为全局组件和私有组件，先介绍全局组件的创建方式。全局组件创建方式有 3 种，下面详细介绍。

组件创建方式一

视图层代码如下。

<div id="main">
    <mycom1></mycom1>
</div>

组件代码如下。

<script>
    var compontent1 = Vue.extend({
        template: '<h1>组件</h1>' // 渲染到页面上的HTML代码
    });

    // 组件的自定义名字
    Vue.component('mycom1', compontent1);
</script>

代码解析如下。

使用 Vue.extend 方法配置要渲染到页面中的 HTML 代码。
使用 Vue.component 方法注册组件，有两个参数：第一个参数为组件名字；第二个参数是要渲染的 HTML 代码。
组件以标签形式调用。

扩展

当前组件的名字为 mycom1，组件的名字可以使用驼峰式命名法，如 myCom1，如果使用了该命名法，则在视图层可以使用横线拼接。

<my-com1></my-com1>

template 属性只能有一个根节点。

组件创建方式二

视图层代码如下。

<div id="main">
    <mycom2></mycom2>
</div>

组件代码如下。

<script>
    Vue.component('mycom2', {
        template: '<h1>组件的第二种创建形式</h1>'
    });
</script>

代码解析如下。

直接使用 Vue.component 注册组件，第一个参数是组件名字，第二个参数是要渲染的 HTML 代码。

组件创建方式三

使用前两种方式有个缺点，即 template 属性值是字符串，没有代码提示，不利于写复杂代码。使用方式三可解决这个问题，代码如下。

视图层代码如下。

<div id="main">
    <mycom3></mycom3>
</div>

<template id="temp">
    <div>
        <h1>创建组件的第三种方式</h1>
    </div>
</template>

组件代码如下。

<script>
    Vue.component('mycom3', {
        template: '#temp'
    });
</script>

代码分析如下。

创建方式依然使用 Vue.component，只是把配置对象中的 template 属性值抽离成 template 模板。把 template 模板放到视图层，就可以正常写 HTML 代码，会有代码提示功能。