vue动态组件component原理_component注解

vue动态组件component原理_component注解componentis内置组件切换方法一:component组件(单独拿出一个组件来专门进行切换使用)使用is来绑定你的组件:如下面的reviewedPlanplanDetailsListattachmentList等引入的组件名changeViewFun是用来切换组件的方法通过给is绑定的currentView来实现切换组件pathUrl就是当前的路由…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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、公众号:公众号「进军全栈攻城狮」 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉

vue动态组件component原理_component注解

红包天天领

vue动态组件component原理_component注解              vue动态组件component原理_component注解

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/193028.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • java多线程并发之旅-14-lock free queue 无锁队列[通俗易懂]

    java多线程并发之旅-14-lock free queue 无锁队列[通俗易懂]无锁队列能实现吗?上面说的加锁的环形队列,可以保证线程安全。但是加锁能不能去掉呢?答案是肯定的,请看下面的娓娓道来。i++是原子操作吗?i++和++i是原子操作吗?有一个很多人也许都不是很清楚的问题:i++或++i是一个原子操作吗?在上一节,其实已经提到了,在SMP(对称多处理器)上,即使是单条递减汇编指令,其原子性也是不能保证的。那么在单处理机系统中呢?在编译器对C/C++源代码…

  • 阿里云wordpress配置免费ssl证书

    阿里云wordpress配置免费ssl证书本文最后更新于352天前,其中的信息可能已经有所发展或是发生改变。1、登录阿里云,选择产品中的ssl证书如果域名是阿里的他会自动创建dns解析,如果是其他厂商需要按照图片配置,等待几分钟进行验证点击审核,等待签发签发后根据需求下载所需证书我的wordpress是直接买的阿里轻量应用服务器,打开轻量应用服务器的控制台配置域名选择刚申请好的ssl证书在wordpre…

  • idea激活码【注册码】

    idea激活码【注册码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 短信定位 android,短信定位

    短信定位 android,短信定位开发者名称:xunl这是一款利用发送短信来得到对方位置的应用.应用场景:1.寻找家人:家里有小孩子或老人,只要给对方发送一条包含设置好关键字的短信内容,即可以地图的方式在当前手机上显示对方的位置.2.找回手机:自己的手机找不到了,只要给自己的手机发送一条短信,即可得到手机所在地理位置.使用方法(寻找家人):1.首先说一下概念:你想知道谁的位置,那么谁就是软件中的TA,而你在软件中的角色是主人.2….

    2022年10月13日
  • 股票代码分类_选择股票从哪几个方面选

    股票代码分类_选择股票从哪几个方面选创业板:创业板的代码是300打头的股票代码沪市A股:沪市A股的代码是以600、601或603打头沪市B股:沪市B股的代码是以900打头深市A股:深市A股的代码是以000打头深圳B股:深圳B股的代码是以

  • Pycharm调试_pycharm 远程调试

    Pycharm调试_pycharm 远程调试动机一些bug由于本地环境和线上环境的不一致可能导致本地无法复现本地依赖和线上依赖版本不一致也可以导致一些问题有时一些bug跟数据相关,本地数据无法和线上数据一致有些三方平台会验证服务器的合法性或者异步回调结果,如微信支付,这时候本地无法测试如上所诉,要是有一个很方便调试远程服务器的方法,岂不美哉。通过PyCharm我们可以很方便地实现远程调试,下面详细介绍下PyCharm这个牛叉的功能。添加远程…

    2022年10月29日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号