组件-创建组件的方式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 中,形成模块