VUE跨页面传值的精妙

痛定思痛。 2023-02-25 02:13 9阅读 0赞

### 背景 ###

众所周知，以前开发者只要掌握HTML、CSS、JavaScript *三驾马车*就能胜任一份Web*前端*的工作。而在技术日新月异的现在，Vue, React，Angular在代替旧的前端框架已经是大势所趋了。

### 一、vue简介 ###

Vue是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与[现代化的工具链][Link 1]以及各种[支持类库][Link 2]结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

是一个兴起的前端js库，是一个精简的MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。

### 二、与ajax比较 ###

**2.1** vue本身不支持ajax请求，需要借助vue-resource,axios插件。vue2官方推荐axios,是一个基于Promise的HTTP请求客户端，不再对vue-resource进行维护和更新。

axios([options])  
    axios.get(url[,options]);
        传参方式：
            1.通过url传参
            2.通过params选项传参
    axios.post(url,data,[options]);
        axios默认发送数据时，数据格式是Request Payload，并非我们常用的Form Data格式，
        所以参数必须要以键值对形式传递，不能以json形式传参
        传参方式：
            1.自己拼接为键值对
            2.使用transformRequest，在请求发送前将请求数据进行转换
            3.如果使用模块化开发，可以使用qs模块进行转换
     
    axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库

**2.2 ajax传参格式**

ajax是jquery封装的一个前端方法，通过请求后台API接口方式，用以局部刷新和动态展示页面。

$.ajax({
        url: "http://localhost:8082/boot/request/parameter",
        type: "post",
        contentType: "application/json;charset=utf-8",
        data: JSON.stringify({name: "aaa", foo: ["bar1", "bar2"]}),
        success: function (json) {
            console.log(json);
        }
    });

**2.3 vue传参格式**

场景：点击父页面的XX查询按钮，弹出子页面queryView，父页面选中的某行记录值传到子页面中，子页面请求后台Api关联查询并展示父页面选中记录对应的明细记录。

1.  在父页面定义方法query()
2.  const rows为父页面查询列表选中的某行记录
3.  queryView为子页面
4.  params 为定义的传值对象
5.  callback 回调方法

query() {
          let title = "XX查询"
          const rows = this.$refs.multipleTable.selection;
          this.$dialog.modal(queryView, {
            title: title,
            width: 1200,
            height: 600,
            params: {domain: Object.assign({}, rows[0])},
            callback: data=> {
              if(data.flag == true)
                this.queryData()
            }
          });
        }

子页面中定义接收参数对象，接收参数对象有3种格式：**变量、对象、常量**

这里定义为对象 Object

props:{
        domain: {
          type: Object,
          default: function() {}
        }
      }

**调用后台api接口关联查询并展示**

1.  params 定义方法中变量，获取从父页面接收的对象中的属性值
2.  this.operat4Data(XXApi.getList, params, null, null); 调用后台api接口及传参

queryData() {
          let params = {apiParams:this.domain.apiParams};
          let respData =  this.operat4Data(XXApi.getList, params, null, null);
          respData.then( data => {
            this.dataList = data.posts;
            this.total = data.count;
          });
        }

### 三、vue的优势 ###

vue因其极具方便灵活易用等特性，为广大前端开发者所推崇和使用。

![20200710090122653.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZvbGxvd18yNA_size_16_color_FFFFFF_t_70][] 同名原创公众号： **程序大视界**

[Link 1]: https://cn.vuejs.org/v2/guide/single-file-components.html
[Link 2]: https://github.com/vuejs/awesome-vue#libraries--plugins
[20200710090122653.png]: /images/20230209/b3aee1baeea34560b1779f28e710ce54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZvbGxvd18yNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190115161409351.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZvbGxvd18yNA==,size_16,color_FFFFFF,t_70