vue混入html,vue混入(mixins)的应用

vue的API中有个混入，这里主要介绍利用选项合并来二次封装element-ui的el-table标签，使其达到可以最大限度的复用。html

官方例子

官方的例子作了简单的介绍，这里就不浪费篇幅去介绍了，你们能够直接查看官方例子选项合并或则查看下面的截图： vue

其实你们看了官方文档已经知道了用法和注意事项，下面开始一步步来验证便可。

新建Vue项目

利用vue-cli工具新建一个项目，步骤以下：面试

在cmd命令工具中输入下面的命令新建一个vue项目：

vue create elevue

复制代码

切换目录到刚刚建立的项目根目录下运行 yarn serve命令开启服务

在浏览器上输入上面的网址就能够看到效果了，以下：

安装element-ui

在上面新建的项目根目录下安装element-ui，命令以下：vue-cli

yarn add element-ui

复制代码

安装完后再main.js中添加以下代码： element-ui

目前还不知道有没有安装成功呢，因此找个页面试试效果，在home.vue文件中添加以下代码看看效果：

默认按钮

主要按钮

成功按钮

信息按钮

警告按钮

危险按钮

复制代码

mixins文件(重点)

这里结合element-ui表格的二次封装这篇文章里面封装的table组件来介绍mixins这个文件的具体写法和大体内容。api

修改封装table

因为封装的table适合每一个页面单独使用，这里是须要将大部分的公共功能抽出来整合，减小后面页面的重复劳动，因此须要对此进行改进，主要改进一个地方就是loading的位置以下： 跨域

对于具体应用组件table的地方也须要修改两个地方，一个是去掉table对象里面的loading，而后是在table组件上添加一个loading绑定，以下：

编写mixins文件内容

这时在src目录下新建utils目录，utils目录下新建咱们的mixins.js文件，添加以下简单的代码：浏览器

export var mixin = {

data() {

return {

loading: true, // 加载状态

};

}

};

复制代码

而后再新建项目的home.vue文件中引入上面的文件 bash

注意上面的两处地方，这个时候的效果就出来了，以下：

接着在添加方法获取表格数据以及生命周期函数来初始化，以下：

export var mixin = {

data() {

return {

loading: true, // 加载状态

};

},

mounted() {

this.getList();

},

methods: {

getList() {

this.$http.get(this.table.listUrl).then(res => {

this.table.data = res.data.recent;

this.loading = false;

});

},

},

};

复制代码

上面有一个listUrl地址目前没有，其实这时只须要在home.vue中定义listUrl便可获取数据了 ide

上面是采用的知乎的开发api须要配置跨域，这里就你们能够自行配置跨域便可。

这个时候就能够看到页面中有数据展现了

其实这里我只是介绍了方法，能够有不少公用功能写在这里，如：

export var mixin = {

data() {

return {

page: {

pageSize: 10,

pageSizes: [10, 30, 50, 100, 200],

currentPage: 1,

totalPage: 0,

},

loading: true, // 加载状态

searchFileds: {}, //搜索条件

};

},

mounted() {

this.getList();

},

methods: {

getList() {

this.$http.get(this.table.listUrl).then(res => {

this.table.data = res.data.recent;

this.loading = false;

});

},

handleSizeChange(val) {

this.page.pageSize = val;

},

handleCurrentChange(val) {

this.page.currentPage = val;

},

},

};

复制代码

上面能够将分页和查询都统一到一块儿来处理，只须要修改getList()方法里面的参数便可。

若是你的接口规范的话，甚至删除功能均可以直接写在这里，后面就会少些好多代码的。