Vue.js学习系列(八)---如何使用组件

一、什么是组件

组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树

组件听起来比较抽象,实际上组件可以看作是自定义的HTML元素。因为组件可以用来扩展HTML元素,封装可重用的HTML代码。

二、如何使用组件

vuejs组件的使用需要3个步骤:

1.创建组件构造器

2.注册组件

3.使用组件

第一步:创建组件构造器

在工程目录下src文件夹下创建component文件夹,并在component文件夹内创建firstcomponent.vue文件,并仿照App.vue 的格式写一个组件。这里我们写一个简单的组件,

第二步:注册组件

然后在App.vue 使用组件 ( 因为在index.html里面定义了

所以就以这个组件作为主入口,方便 )。

(1)在App.vue引入创建的firstCom.vue组件标签内的第一行写

importfirstcomponentfrom'./component/firstcomponent.vue'

(2)在标签内的data 代码块后面加上 components: { firstcomponent }。

第三步:使用组件

App.vue的内加上

App.vue代码如下

这样我们就创建了一个名为的firstcomponent的组件。运行效果如下图:

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

推荐阅读更多精彩内容