组件的定义及创建方式

什么是组件?

组件是 Vue.js 最强大的功能之一。组件可以扩展html元素, 封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行扩展的原生html元素。

所有的 Vue 组件同时也都是 Vue 的实例,所以可以接收相同的选项对象(除了一些根级特有的选项)并提供相同的声明周期钩子。

组件的创建主要有三种方式

       注意:1. 模板template中只能有一个根节点;2. 组件的名字,如果采用驼峰命令的话,在使用的时候,就要加上 “-”,比如组件名字叫indexA,那么在使用的时候就叫index-a.

第一种:使用Vue.extend()和Vue.component()两个方法创建

       Vue.extend()函数会返回一个组件的构造器,它里面包含一个参数,它是一个对象,里面是一些配置项

       Vue.component()函数会利用Vue.extend()返回的构造器创建一个组件的实例,它有两个参数,一个是组件的名字,另一个组件的构造器

第二种:直接使用Vue.component()方法创建

第三种:通过指定模板创建

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489...
    秋玄语道阅读 14,691评论 3 116
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,660评论 0 6
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,463评论 0 29
  • 那风,忽然就肆虐了起来,吹得那茶馆门口老槐树上的叶子,全都露出了白底儿,它们叫嚣着,不知是,吵着要离开,还是惊恐着...
    白曦碧夏阅读 1,638评论 0 0
  • 我从没有想像过有这么一天,我会把自己的经历写出来,并不是鼓起勇气,也不是一个语文从来不及格的人在秀文采,可能仅仅只...
    vip4阅读 1,735评论 0 0