Vue.js学习系列(四十二)-- Vue.js组件

组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任

意类型的应用的界面都可以抽象为一个组件树:

1,注册组件

注册一个全局组件的语法格式如下:

Vue.component(tagName, options)

tagName为组件名,options为配置选项。注册后,我们可以使用以下方式来调用组件:

2.全局组件

在vue.js的实例中,我们经常会用到全局组件,这里我们来注册一个简单的全局组件,并使用它。

运行结果如下图:在页面上显示一级标题自定义组件

3.局部组件

Vue.js不仅有全局组件,也有局部组件,在实例选项中注册局部组件,这样组件只能在这个实例中使用:

我们来注册一个简单的局部组件

运行结果同样是将一级标题“自定义组件”显示在页面上。

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

推荐阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,273评论 0 6
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,095评论 0 29
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 6,123评论 0 42
  • Vue笔记系列1、Vue.js入门3、Vue.js进阶 API 以下会随用随记一些API,可能会不定期更新。 Vu...
    其心阅读 2,098评论 0 10
  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 3,885评论 5 14