父传子:
//父页面中,要传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')
},
},
}