Vue父子组件传值流程,axios的使用,vuex的使用,页面路由跳转，axios的封装

最新推荐文章于 2024-08-02 09:29:40 发布

知了还没睡

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_36784628/article/details/90518781

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

父传子：

//父页面中，要传daglgridData到子组件，daglgridData现在data中定义
<daglgrid :daglgridData="daglgridData"></daglgrid>

子组件接收

props:{
      daglgridData:{
            type:Array,
            default:()=>{
                return []
            }
        }
    },
//在js中使用要加this，html中不用

二，子组件传给父组件

getData(){//点击查询按钮
      this.$emit("cangetype",value);
},

父组件接收：

<datatype  @cangetype="cangetype"></datatype>

在methods中定义

cangetype(value){
    //value即为传过来的值
}

监听：

watch:{
    cangetype(curVal,oldVal){

    }

}

二、asios的使用

post：

            this.axios.post("electrical/relate",{nodeType:notype})
            .then(res=>{
                if(res.data==""||!res.data||res.data==undefined){
                    return;
                }
                this.btnArry = res.data
                this.getMaindata()
            })
            .catch(error=>{
                console.log(error)
            })

//修改请求头
this.axios.post("/apportion/batchSave",JSON.stringify(letneeddata),{headers: {'Content-Type': 'application/json'}})
.then(res=>{}).catch(error=>{})

get：

           //elem是json对象，params是固定名称
             this.axios.get("/apportion/getList",{params:elem})
            .then(res=>{
                this.loading.close();
                if(res.data==""|| !res.data || res.data.error){
                    this.$notify({
                        title: '操作提示',
                        message: res.data.error || "暂无数据！",
                        position: 'bottom-right'
                    });
                    return;
                }
                this.daglgridData = res.data
            }).catch(error=>{
                console.log(error);
            })

修改axios的url路径：

1、在config下的index.js修改

  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api/':{
        target: "http://192.168.6.200:8080",
        changeOrigin:true,
        pathRewrite:{
            '^/api/':''
        }
      }
    },

2、APP.vue中修改

//修改默认路径
axios.defaults.baseURL = "/api/";
Vue.prototype.defaultUrl = "/api/";
//打包时用
//Vue.prototype.defaultUrl = location.href.split("/#/")[0]+"/";
//axios.defaults.baseURL = location.href.split("/#/")[0]+"/";

三、vuex的使用

1、在src目录下新建store文件夹，在store内建立index.js

index.js中：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);
let navFlag = false;
export default new Vuex.Store({
    state:{
        user:"",
    },
    actions:{
        changUser(ctx,user_){
            ctx.commit("changUser_",user_);
        },
    },
    mutations:{
        changUser_(state,user_){
            state.user = user_;
        }
    }
})

2、组件中使用

引入：

import {mapState} from "vuex";

构造函数中：

computed: {
        ...mapState(["flag","menuActive","user"])//数组里写需要用的变量名
    }

方法里修改

//方式一 
this.$store.dispatch("changUser","value");
//方式二          
this.$store.commit("changUser_","value");

三、路由跳转

this.$router.push({name:"test"});

四、axios的封装，main.js中

import axios from 'axios'
Vue.prototype.axios = axios



Vue.prototype.Ajax = function(obj){
  if(!obj.noneLoad && !this.loading){//noneLoad为true表示不打开请求等待框
    this.loading = this.$loading({
        lock: true,
        text: '正在查询中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
  }
  store.commit("changeLocalStorageTimeOut",15*60);
  axios({
    method: obj.method || 'post',
    params:obj.params,//get请求需要用到
    url: obj.url,//请求接口
    data: obj.data || "",//请求参数
    timeout:30000,//请求超时时间（毫秒）
    headers: obj.headers==undefined?"":obj.headers//修改请求头
  }).then(res=>{
    if(!obj.noneClose && this.loading){//noneClose为true表示不关闭等待框
      this.loading.close();
    }
    delete this.loading;
    if(res.data == "<html><script type='text/javascript'>window.top.location.href='/logout';</script></html>"){//后台seccion失效
      this.$router.push({path:'/'})
      this.$store.dispatch("changFlag",false);
      this.$store.dispatch("changeDestroy",true);
      localStorage.removeItem("user");
      localStorage.removeItem("pageIndex");
      this.$store.commit("changeLocalStorageTimeOut",0);
      return;
    }
    obj.func(res);
  }).catch(err=>{
    if (err.code === 'ECONNABORTED' && err.message.indexOf('timeout') !== -1) {
      this.$notify({
          title: '操作提示',
          message: "请求超时",
          position: 'bottom-right'
      });
    }
    if(this.loading){
      this.loading.close();
      delete this.loading;
    }
    if(obj.error){
      obj.error(err);
    }
  });
};

使用

this.Ajax({
    url:"main/getInitData",
          func:(res=>{
          this_.data = res.data;
    })
});

vue2.0监听prop

  props: {
    controlIstran: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      istran: false,
    }
  },
  watch: {
    controlIstran: {
      immediate: true,
      handler(newValue) {
        this.istran = newValue
      },
    },
  },
  methods: {
    foldClick() {
      this.istran = !this.istran
      this.$emit('foldClick')
    },
  },
}

知了还没睡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue父子组件传值流程,axios的使用,vuex的使用,页面路由跳转，axios的封装

父传子：//父页面中，要传daglgridData到子组件，daglgridData现在data中定义<daglgrid :daglgridData="daglgridData"></daglgrid>子组件接收props:{ daglgridData:{ type:Array, default:...
复制链接

扫一扫