vue 封装可复用列表组件

Posted 2023-04-27

参考技术A 在开发过程当中，列表页面会有很多，比如：消息列表、用户列表等。
我们可以为这样的页面封装一个可复用性的列表组件。

这些页面的共性：
1、后端接口非常相似：请求列表数据 需要提交的参数 请求的页数pageIndex 和 每页的个数 pageSize ，返回参数 data 里边基本会有 list数组。
2、分页加载，也就是上拉加载更多，或者点击页面加载更多。

不同之处：
1、每个列表项的UI布局不同。比如：消息列表，每个消息大概内容包括：消息标题，描述，时间等信息。用户列表，每个用户项，大概内容包括：用户的姓名，联系方式等等。
2、每个列表项有自己的业务逻辑，点击事件等等
3、后端接口请求参数，pageIndex和pageSize之外的参数。

封装可复用列表组件涉及到的vue 技术点
1、props 父组件 把 请求api地址和请求参数传递给组件。
2、v-slot 作用域插槽 父组件可以访问子组件 item 数据，解耦UI布局。
3、mint-ui Loadmore 组件 实现上拉加载更多。

我们在封装复用性组件的时候，组件名建议使用多个单词，避免跟现有的以及未来的 html 元素相冲突。

v-list 组件

使用 v-list

好，到了这里我们就封装并使用了一个可复用列表组件。
总结：
封装这个列表组件，可以解决大部分列表页，列表组件完成了，数据请求，加载更多，是不是最后一页等功能，不必在每个列表页，处理这些问题。
我们通过作用域插槽，父级可以访问每个列表项的数据，可以解耦UI布局，自己定义自己的UI布局，添加事件等。

vue组件详解——组件与复用

一、什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

 

二、组件用法

组件需要注册后才可以使用，注册有全局注册和局部注册两种方式。

2.1 全局注册后，任何V ue 实例都可以使用。如：

        <div id="app1">
            <my-component></my-component>
        </div>

Vue.component(‘my-component‘,{
   template: ‘<div>这里是组件的内容</div>‘
});

var app1 = new Vue({
   el: ‘#app1‘
});

 要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用＜my-component></my- component> 的形式来使用组件了

template的DOM结构必须被一个元素包含， 如果直接写成“这里是组件的内容”， 不带“<div></ div ＞”是无法渲染的。（而且最外层只能有一个根的<div>标签）

 

2.2 在Vue 实例中，使用component选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。如：

        <div id="app2">
            <my-component1></my-component1>
        </div>

var app2 = new Vue({
   el: ‘#app2‘,
   components:{
      ‘my-component1‘: {
          template: ‘<div>这里是局部注册组件的内容</div>‘
      }
    }
});

 

2.3 data必须是函数

除了template选项外，组件中还可以像Vue实例那样使用其他的选项，比如data 、computed 、methods等。但是在使用data时，和实例稍有区别， data 必须是函数，然后将数据return 出去。

        <div id="app3">
            <my-component3></my-component3>
        </div>

Vue.component(‘my-component3‘,{
    template: ‘<div>{{message}}</div>‘,
    data: function(){
        return {
            message: ‘组件内容‘
        }
    }
});
var app3 = new Vue({
    el: ‘#app3‘
});

 一般return的对象不要引用外部的对象，因为如果return 出的对象引用了外部的一个对象， 那这个对象就是共享的， 任何一方修改都会同步。

所以一般给组件返回一个新的独立的data对象。