<body> <div> <b-component> <h1 slot="header">这里可能是一个页面标题</h1> <h2 slot="content">姓名：{{name}}，年龄：{{Age}}</h2> <h1 slot="footer">尾部</h1> </b-component> </div> <template> <div> <header> <slot></slot> </header> <main> <slot></slot> </main> <footer> <slot></slot> </footer> </div> </template> <script src="https://www.jb51.net/Content/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('b-component', { template: '#slottest', }) new Vue({ el: '#app', data: { name: 'Jim', Age: '28' } }); </script> </body>
得到结果
上述代码应该不难理解，就是一个“挖坑”和“填坑”的过程。顺便要提一笔的是，Vue的组件支持使用<templete>的模式来定义标签模板，使用更加灵活和方便。
三、封装自己的Component
以上讲了这么多，都是关于Vue里面Component组件的一部分主要知识点，其他还有很多都没有展开说，因为这方面的文档也是相当丰富，园子里面keepfool的博文关于Vue组件的部分就介绍得非常详细，再者，Vue中文文档也是有很详细的用法说明。接下来，博主打算通过几个实例来说明使用组件给我们前端开发带来的好处。
1、使用Component封装bootstrapTable
对于项目里面的表格展示，可以基于Vue可以自己开发一套，但是说实话，这个工程量还是蛮大的，并且如果要做好，要兼容很多表格的功能，从零开始去重复造轮子实在是有点太耗时。博主项目里面大部分的表格用的bootstrapTable组件，于是博主一直在想能不能封装一套基于Vue的bootstrapTable的用法。网上也找不到类似的封装示例，大部分使用vue的框架都会自己去实现一套自己的表格样式。于是打算自己动手试试，正好也可以熟悉下component的用法。
首先新建一个js文件命名为vue.bootstrapTable.js。博主直接将代码贴出来，如果有不完善的地方，希望大家斧正。
(function ($) { //表格初始化的默认参数 var defaults = { method: 'get', toolbar: '#toolbar', striped: true, cache: false, pagination: true, }; //注册bootstrapTable组件 Vue.component('bootstrap-table', { template: '<table></table>', props: { 'tableParam': { type: Object } }, //组件渲染之前 created: function () { //debugger; }, //组件渲染之后 mounted: function () { debugger; var params = $.extend({}, defaults, this.tableParam || {}); this.bootstraptable = $(this.$el).bootstrapTable(params); } }); })(jQuery);
然后再界面上面
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="https://www.jb51.net/Content/bootstrap/css/bootstrap.css" /> <link href="https://www.jb51.net/Content/bootstrap-table/bootstrap-table.css" /> </head> <body> <div> <bootstrap-table :table-param="tableParam"></bootstrap-table> </div> <script src="https://www.jb51.net/Content/jquery-1.9.1.min.js"></script> <script src="https://www.jb51.net/Content/bootstrap/js/bootstrap.js"></script> <script src="https://www.jb51.net/Content/bootstrap-table/bootstrap-table.js"></script> <script src="https://www.jb51.net/Content/vue/dist/vue.js"></script> <script src="https://www.jb51.net/Content/vue-component/vue.bootstrapTable.js"></script> <script type="text/javascript"> var testData = [ { Name: 'Jim', Age: 30, Remark: '鸡母格林' }, { Name: 'Kate', Age: 28, Remark: '凯特' }, { Name: 'Lucy', Age: 20, Remark: '露西' }, { Name: 'Uncle Wang', Age: 45, Remark: '严厉的王老师' } ]; new Vue({ el: '#app', data: { tableParam: { data: testData, columns: [ { field: 'Name', title:'姓名' }, { field: 'Age', title: '年龄' }, { field: 'Remark', title: '备注' }] }, } }); </script> </body>
最后测试结果：
纵观这数十行代码，基本原来其实很简单，通过组件的props功能将<bootstrap-table>实例中的初始化参数传到组件模板里面，然后再组件加载完成之后初始化bootstrapTable，最后将bootstrapTable的实例给到组件，这样在就可以通过Vue的实例通过子组件调用到当前初始化的bootstrapTable对象。
2、封装select
关于select的封装，还是打算基于第三方组件来做。同样的，我们新建一个js文件，命名为vue.bootstrapSelect.js，其代码如下：