vue 内置组件 component 的用法示例详解

<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,
        }
})

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;

<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>

click: () => {
        this.$emit("updateView","fileDetails");
        this.$routePlugin.addQuery({
               viewName:'fileDetails',
               identity:'student'
          })
 }

click:()=>{
     this.$emit('updateView', 'studentGrowthPortfolio')
}

beforeDestroy(){

            this.$routePlugin.delQuery('identity','viewName')
 },