大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
component is 内置组件切换方法一:
component组件(单独拿出一个组件来专门进行切换使用)
使用is来绑定你的组件:如下面的reviewedPlan planDetailsList attachmentList等引入的组件名
changeViewFun 是用来切换组件的方法 通过给is绑定的currentView来实现切换组件
pathUrl就是当前的路由
<template>
<div class="reviewed">
<component
:is="currentView"
@changeview="changeViewFun"
:pathUrl="pathUrl"
></component>
</div>
</template>
<script>
//引入三个需要切换的组件
import reviewedPlan from '../modules/reviewedPlan.vue';
import planDetailsList from './planDetailsList';
import attachmentList from './attachmentList.vue';
export default {
name: "reviewed",
data() {
return {
currentView:'reviewedPlan',
pathUrl:'',
hrefIndex:"",
}
},
components: {
reviewedPlan,
planDetailsList,
attachmentList
},
created () {
this.hrefIndex=window.location.href.indexOf('jxjh')-1;
this.pathUrl=window.location.href.substring(this.hrefIndex);
if(this.$route.query.currentView){
this.$route.query.currentView = this.$route.query.currentView===this.currentView?this.$route.query.currentView:this.currentView;
}
},
methods:{
//组件切换方法
changeViewFun(val){
this.currentView = val;
}
},
}
</script>
<style lang="less" scoped>
@import "~@/libs/less/theme/theme.less";
</style>
每个切换的组件
this.$emit("changeview","planDetailsList"); //父组件监听到changeview,给is绑定的currentView重新赋值
this.$router.push({
path: this.pathUrl, //通过props接收 props:{pathUrl:String}
query: {
id: params.row.id, //参数名
from:"reviewedPlan" //这里加from原因是要区分多个组件的情况下通过路由from参数来区分是通过那个组件切换过来的
}
})
返回组件内部方法 (点击返回的时候执行的操作)
var url = this.$route.query.from; //取路由from,区分是那个通过那个组件传递过来的,返回的时候可返回到对应的组件
this.$emit("changeview",url);
this.$router.push({
path: this.pathUrl,
query: {
currentView:url,
}
})
component is 内置组件切换方法二:
实现的结果是:组件A调转组件B,组件A里面有个查看按钮,点击查看,跳转到组件B,组件B里面点击返回跳转到组件A,使用component,从组件A跳到组件B,在组件B里面刷新之后还是停留在组件B,还有就是点击tab切换的时候也可以,点击那个tab,当前tab发请求。具体实现:
1、封装routePlugin.js插件
const addQuery=function(queryDate){
var query={};
Object.assign(query,this.$route.query,queryDate);
this.$router.push({
path:this.$route.path,
query:query
});
};
const delQuery=function(){
var query={};
var arg=Array.prototype.slice.call(arguments);
Object.assign(query,this.$route.query);
arg.forEach(item=>{
delete query[item];//删除参数
})
this.$router.push({
path:this.$route.path,
query:query
});
};
var install = {
install(Vue) {
Vue.mixin({
beforeCreate() {
var self=this;
this.$routePlugin={
addQuery:addQuery.bind(self),
delQuery:delQuery.bind(self)
}
}
})
}
}
export default install;
2、在main.js中注册到全局,
import routePlugin from “./libs/js/vueExtend/routePlugin.js”;
Vue.use(routePlugin); //修改参数方法
3、在组件内部使用
说明:需要三个组件:第一个:component主控制组件、第二个:初始化组件内容、第三个:跳转过去的组件
第一个:studentIndex.vue
<template>
<component
:is="viewName"
@updateView="updateView"
>
</component>
</template>
<script>
import studentGrowthPortfolio from './studentGrowthPortfolio.vue'; //学生 index
import fileDetails from './fileDetails.vue'; //成长档案 详情
export default {
data(){
return{
viewName:"studentGrowthPortfolio",
}
},
components:{
studentGrowthPortfolio,
fileDetails
},
mounted(){
this.viewName=this.$route.query.viewName?this.$route.query.viewName:this.viewName;
},
created () {
},
methods:{
/**
* 接收子组件数据
* @param data {Object}
* @return {Void} 无
*/
updateView(name){
this.viewName = name
if(!name){
this.$routePlugin.delQuery('viewName');
}else{
this.$routePlugin.addQuery({viewName:name});
}
},
},
}
</script>
<style scoped lang="less">
@import "~@/libs/less/theme/theme.less";
</style>
4、第二个:studentGrowthPortfolio.vue,点击查看需要执行的代码
click: () => {
this.$emit("updateView","fileDetails");
this.$routePlugin.addQuery({
viewName:'fileDetails',
identity:'student'
})
}
5、第三个:fileDetails.vue,点击返回时需要执行的代码
click:()=>{
this.$emit('updateView', 'studentGrowthPortfolio')
}
fileDetails.vue添加beforeDestoy,当离开当前组件时,销毁路由上的identity,和viewName参数
beforeDestroy(){
this.$routePlugin.delQuery(‘identity’,’viewName’)
},
一切都ok了
交流
1、QQ群:可添加qq群共同进阶学习: 进军全栈工程师疑难解 群号: 856402057
2、公众号:公众号「进军全栈攻城狮」 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉
红包天天领
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/193028.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...