工作中经常有这样的场景，必须开发一个新闻发布功能，会有一个新闻分类表(表名：newsSort)，然后又一个新闻表(表名：newsSort)。

新闻表中会有一个字段（字段名：SortId）用来保存新闻分类Id，那么在前台读取新闻时候如果需要同时读取新闻分类怎么办呢？

方法1

在后台读取新闻数据时，同时把SortId字段转换新闻分类表名，这个是后端方法，这里不赘述。

方法2

封装一个转换组件，前端读取到SortId字段值后到后端通过ajax请求，返回分类名称。封装的组件如下：

//Id转文本组件Vue.component("server-convert", { props: { serverUrl: { default: "" }, serverData: {default:{}}, convertConfig: { default:"" }, }, data: function () { return { convertText:"", } }, created: function () { var vue = this; var data = this.serverData; var defaultOptions = { async: true, type: "get", url: this.serverUrl, data:data}; //ExtendObject为对象合并方法 defaultOptions = ExtendObject(defaultOptions, this.convertConfig); if (defaultOptions.url == "" && JSON.stringify(data) =="{}") { return; } //调用Ajax方法 Ajax(defaultOptions, function (data) { if (Array.isArray(data)) { data = data.join(","); } vue.convertText = data; }); }, template: '<span>{{convertText}}</span>'});

上面组件中用到了ExtendObject和 Ajax这两个方法，这两个方法在公用库中，依赖jquery，下面这两个公用方法我也写出来分享给大家。

代码如下：

function ExtendObject() { var newObject = {}; for (i = 0; i < arguments.length; i++) { newObject = $.extend(newObject, ObjectParse(arguments[i])); } return newObject;}function Ajax(thisOptions, callBack, errorCallBack) { var rv = ""; //同步返回值,异步获取不到 if (callBack == undefined) { callBack = null; } if (errorCallBack == undefined) { errorCallBack = null; } var defaultOptions = { url: "", data: {}, type: "get", async: true, cache: false, ifModified: true, dataType: "json", traditional:true, //不进行深度序列化 timeout: 0,//单位为毫秒，0代表永远不超时 contentType: "application/x-www-form-urlencoded;charset=utf-8", //可选：application/json;charset=utf-8 beforeSend: function (xhr) { //console.log('beforeSend') }, success: function (data, textStatus, jqXHR) { rv = data;//回调 if (callBack != null) { if (typeof (callBack) == "function") { callBack.call(this, data, thisOptions);//方法回调 } } }, error: function (xhr, textStatus) { if (errorCallBack != null) { if (typeof (errorCallBack) == "function") { errorCallBack.call(this, xhr, textStatus);//错误回调 } } //alert("ajax出现错误,status:" + xhr.status + "，textStatus：" + textStatus); }, complete: function (xhr, textStatus) { if (textStatus == "error") { //var newWin = open("/Incs/_blank.html", "_blank"); //newWin.document.write(xhr.responseText); console.log(xhr.responseText); } } }; defaultOptions = ExtendObject({}, defaultOptions, thisOptions); if (defaultOptions.contentType.indexOf("json")>=0) { if (typeof defaultOptions.data == "object") { defaultOptions.data = JSON.stringify(defaultOptions.data); } defaultOptions.contentType = "application/json;charset=utf-8"; } else { defaultOptions.contentType = "application/x-www-form-urlencoded;charset=utf-8"; } if (defaultOptions.url.Trim() == "") { alert("Ajax的url参数不能为空"); return; } $.ajax(defaultOptions); return rv;}

封装好组件后，在html页面中就可以直接使用组件，使用方式如下：

<server-convert server-url="/GetNewsSortName/" :server-data="{id:dataItem.SortId}"></server-convert>

这样就可以通过ajax方式请求/GetNewsSortName/地址。ajax中传递的data为：{id:dataItem.SortId}，dataItem为新闻表中的一条json数据。这个属性可以根据后端需要自行构造。

最后效果如下：

希望通过这个例子让大家更容易掌握vue组件的封装和使用。