组件-创建组件的方式3|学习笔记

开发者学堂课程【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 中，形成模块