vue 内置组件 component 的用法示例详解
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:{
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')
},到此这篇关于vue内置组件component的用法的文章就介绍到这了,更多相关vue内置组件component内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
