前言
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
组件开发的基础
组件可以扩展 HTML 元素，封装可重用的代码。我理解为功能模块的模板吧。
对于vue来说，组件是这个样子的，我们在html里面写
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
组件可以扩展 HTML 元素，封装可重用的代码。我理解为功能模块的模板吧。
对于vue来说，组件是这个样子的，我们在html里面写
然后就出来
代码
所以我们需要定义它，把 my-component的标签和代码关联起来，所以我们要定义它
定义了之后，我们要让页面能够渲染它，让Vue知道它的存在
以上，是官网一个非常简单的例子 ，其实觉得和一个function的封装也差不多，定义，引入，然后执行。
然后一个组件可以引用别的组件的东西，有点像函数的互相调用啊。
这是官网的例子
这个是一个可以排序的表格的例子。我们从头开始来制作一个可以排序的表格。
基本结构
首先分成两个部分，一个是搜索框，一个是表格本身，我们可以得到这样的结构
th {
background-color: #42b983;
color: rgba(255,255,0.66);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-user-select: none;
}
td {
background-color: #f9f9f9;
}
th,td {
min-width: 120px;
padding: 10px 20px;
}
margin-bottom: 10px;
}
提取组件
我们是想要让表格成为单独的组件，所以我们定义一个叫做 demo-grid的组件，用它来生成表格
代码里面关于表格的那部分给放到组件模板里面，我们定义组件。也就是用script来定义,
定义完了之后我们要在给Vue注册组件模块，然后进行Vue的渲染
然后最后的效果是一样的，这个时候并没有数据流。
组件数据流
我们要让表格知道表格的头部和表格的内容，也就是有一个gridColumns和gridData，这个数据最开始放在Vue的Data里面
然后我们的组件也要接受这个数据,这里我们通过类似属性的形式给组件模板传入数据，
然后我们在组件里面把相应的数据继承下来。
然后在模板里面替换掉
搜索功能增加
这个时候，我们想加入一个交互，也就是在搜索框增加关键词的时候，表格能够相应地变化。
首先我们要绑定搜索框的模型,也就是用searchQuery来绑定Input
在Vue里面增加data的初始化
同时，在组件模板里面也进行参数传入
组件的定义里面要继承模板的数据,也就是在模板里面是filter-key，注意要转化驼峰写法
这个时候，我们的模板里面要过滤符合filterKey的数据,这里就用到了过滤器，vue提供了一个叫做filterBy的过滤器。|与过滤器，第一个为过滤器的名字，后面的是参数，| filterBy filterKey使用的就是filterBy的过滤器，参数是filterKey
效果如下，我们这样就有了一个 能够过滤的表格
表格排序
这部分逻辑比前面稍微复杂一点点。首先我们给表格加一个三角形，三角形有两种，一种是正序的，一种是逆序的，我们用span来作为三角形的容器
三角形的样式有两种，上升的和下降的
.arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
我们希望能够在不同的状态里面切换，所以我们选择在组件里面有数据存储排序的状态信息，用一个sortOrders的对象来存储排序信息 ，同时用一个sortKey来表示当前用来排序的键，我们设置为name
然后使用orderBy来排序
现在也就是根据name升序排序，所以我们看到表格的结果如下
增加交互
我们希望能够通过点击表格头部来自动升序降序,所以添加鼠标事件，另外把span的样式和sortOrders[key]的值相关联,增加active的样式
相关active的样式如下
对于鼠标事件，我们定义在表格内部，也就是把sortKey定位当前活跃的元素，同时改变sortOrders[key]的值
以上就是关于vue.js组件开发的全部内容了，希望这篇文章对大家学习或者使用vue.js能有一定的帮助，如果有疑问大家可以留言交流。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。