开发者学堂课程【Vue.js 入门与实战：组件-创建组件的方式3】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8176
组件-创建组件的方式3
内容介绍
一、创建组件的方式3操作：
二、创建组件的三种方式回顾
第三种方式和第二种没有太大区别，只不过在第二种内 component 指向的模版字符串，书写比较复杂，因为没有智能提示，很容易漏掉“/” 等内容。
一、 创建组件的方式3操作
<div id=" app">
<mycom3></ my com3</div>
<!--在被控制的#app 外面，使用 template 元素， 定义组件的HTML 模板结构 -->
<template id=" tmp1">
<div>
<h1>这是通过 template 元素,在外部定义的组件结构，这个方式，有代码的只能提示和高亮</h1>
<h4>好用,不错!</h4>
</div>
</template>
<script>
Vue . component ( 'mycom3', {
template: ' #tmpl1'
})
现在还是通过 component 来定义一个组件，只不过组件的模版机构经过了处理。
此时，保存后右键浏览，可以得到以下结果：
以上就是创建组件的方式3的具体操作。
二、创建组件的三种方式回顾
有三种方式可以创建组件，具体如下：
1. 直接通过 Vue.component ，后面通过 vue.extend 创建
2. 还是通过 Vue.component ，只不过第二项需要添加对象自变量
3. 可以抽离模版，放到 template 中，形成模块
