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

目录
  • component is 内置组件切换方法一:
  • component is 内置组件切换方法二:

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

到此这篇关于vue内置组件component的用法的文章就介绍到这了,更多相关vue内置组件component内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue 内置组件keep-alive的使用示例

    目录 一.keep-alive 用法 使用示例: 1.缓存所有页面: 2.根据条件缓存部分页面 3.结合vue-router,缓存部分页面 二.keep-alive 生命周期 1. activated 2. deactivated keep-alive 是Vue内置的组件之一, 主要用于保留组件状态或避免重新渲染. 作用    在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验. 一.keep-alive 用法 < keep-alive> 包裹动态组件

  • 前端架构vue动态组件使用基础教程

    目录 1.基本使用 2.配合 keep-alive使用 1.基本使用 新建组件 Article.vue <template> <div> <p>黄州东南三十里为沙湖,亦曰螺师店.予买田其间,因往相田得疾.</p> <p>闻麻桥人庞安常善医而聋.遂往求疗.</p> <p>安常虽聋,而颖悟绝人,以纸画字,书不数字,辄深了人意.</p> <p>余戏之曰:"余以手为口,君以眼为耳,皆一时异人也.&

  • Vue动态组件与内置组件浅析讲解

    目录 一.动态组件 二.内置组件 一.动态组件 在vue中,有很多的组件可以挂载同一个挂载点上面,要在同一个挂载的点上的多个组件之间可以实现动态的切换渲染,我们可以通过内置组件component的is属性动态的绑定组件,然后我们就可以根据is的值来决定哪一个组件要被渲染,非常的方便. 我们通过一点简单的实例代码可以加深了解: 示例代码: <!DOCTYPE html> <html lang="en"> <head> <title>组件之间

  • Vue动态组件和keep-alive组件实例详解

    目录 动态组件 格式 注意点 使用效果 目录结构 操作 效果 小结 keep-alive组件 使用背景 解决方法 使用keep-alive组件 小结 keep-alive组件-指定缓存 语法 注意: 总结 动态组件 多个组件使用同一个挂载点,并可以动态切换,这就是动态组件. 格式 <component :is="comName"></component> 注意点 is只能是动态属性,:is="组件注册后的标签名字符串或data变量" 不能直接

  • 详解Vue新增内置组件的使用

    目录 一.Teleport 1.1 Teleport 介绍 1.2 使用 Teleport 1.3 预览效果 二.Suspense 2.1 介绍 Suspense 2.2 使用 Suspense 2.3 预览效果 总结 一.Teleport Teleport 官方文档 1.1 Teleport 介绍 1.Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建我们的 UI.我们可以将它们相互嵌套以构建构成应用程序 UI 的树. 2.但是,有时组件模板的一部分在逻辑上属于该组件,而从技术角度来看

  • Vue动态组件component的深度使用说明

    目录 背景介绍 组件封装 Vue动态组件 改造组件 Vue动态组件的理解 什么是动态组件 背景介绍 最近在封装一些基于Vue+ElementUI的组件,将一些实际项目中常用的,有一定规律的业务进行抽象总结,开发出相应的Vue组件. 组件封装 首先想到的就是Form组件,在Element UI提供的Form中,我们需要一个一个的去添加对用的FormItem <el-form ref="form" :model="form" label-width="8

  • Vue高级用法实例教程之动态组件

    目录 基础描述 AST解析 render函数 普通组件和动态组件的对比 工厂函数形式的动态组件 总结 动态组件我相信大部分在开发的过程中都会用到,当我们需要在不同的组件之间进行状态切换时,动态组件可以很好的满足我们的需求,其中的核心是component标签和is属性的使用. 基础描述 // vue <div id="app"> <button @click="changeTabs('child1')">child1</button>

  • Vue动态组件component标签的用法大全

    目录 简介 说明 官网网址 示例 路由设置 父组件 子组件 简介 说明 本文介绍Vue的动态组件的用法. 在Vue中,可以通过component标签的is属性动态指定标签,例如: <component :is="componentName"></component> 此时,componentName的值是什么,就会引入什么组件. 官网网址 https://v2.cn.vuejs.org/v2/guide/components.html#动态组件 示例 路由设置

  • 手写Vue内置组件component的实现示例

    目录 前言 内置组件component的使用 component组件的原理分析 虚拟DOM与原生DOM render函数的使用 尝试手写实现component 总结 最近在复习Vue的源码,今天带大家手写实现一下Vue内置组件component,比较简单,最近面试有被问到. 前言 Vue大家都很熟悉,除了原生的组件,其自己也封装了一下内置组件,比如component,transition,keep-alive等等. component算是用的比较多的了,当我们遇到需要根据不同条件显示不同组件的时

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

    目录 component is 内置组件切换方法一: component is 内置组件切换方法二: component is 内置组件切换方法一: component组件(单独拿出一个组件来专门进行切换使用) 使用is来绑定你的组件:如下面的reviewedPlan planDetailsList attachmentList等引入的组件名 changeViewFun 是用来切换组件的方法 通过给is绑定的currentView来实现切换组件 pathUrl就是当前的路由 <template>

  • vue内置组件transition简单原理图文详解(小结)

    基本概念 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 简单用法 用 v-if/v-show 控制显示隐藏,使用transition 组件控制其变化过程 一个页面子组件 router-view 的消失隐藏,使用transi

  • Vue组件的继承用法示例详解

    目录 Vue组件的继承用法 Vue组件的继承用法 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜参数的需要多重的判断,这样会导致封装的组件比较繁杂,出现过多的判断,用继承可以改写基类中的方法和数据 基类案例: <template> <div class="hello"> 父类:{{name}} <span>{{title}}</sp

  • vue内置组件component--通过is属性动态渲染组件操作

    我就废话不多说了,大家看代码吧~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.bootcss.com

  • vue内置组件keep-alive事件动态缓存实例

    在App.vue文件中配置 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 在路由中配置 { path: '/backstage', component: res

  • LRU算法在Vue内置组件keep-alive中的使用

    vue的keep-alive内置组件的使用也是使用了改算法,源码如下: export default { name: "keep-alive", // 抽象组件属性 ,它在组件实例建立父子关系的时候会被忽略,发生在 initLifecycle 的过程中 abstract: true, props: { // 被缓存组件 include: patternTypes, // 不被缓存组件 exclude: patternTypes, // 指定缓存大小 max: [String, Numb

  • 无UI 组件Headless框架逻辑原理用法示例详解

    目录 概述 精读 总结 概述 Headless 组件即无 UI 组件,框架仅提供逻辑,UI 交给业务实现.这样带来的好处是业务有极大的 UI 自定义空间,而对框架来说,只考虑逻辑可以让自己更轻松的覆盖更多场景,满足更多开发者不同的诉求. 我们以 headlessui-tabs 为例看看它的用法,并读一读 源码. headless tabs 最简单的用法如下: import { Tab } from "@headlessui/react"; function MyTabs() { ret

  • Vue extends 属性的用法示例详解

    目录 引言 App.vue Son.vue HelloWorld.vue 小结 引言 最近在看抖音——<小山与 bug>,看到一个很神奇的 Vue 继承组件的方法,后来专门去翻了 element 和 iview 的源码,发现这个属性的用法好像在这些框架里还没有用到过,怀着试一试的态度,我就自己搭建了个测试项目,发现其实还是挺好用的,甚至有望代替目前我们前端框架业务代码混入的底层实现.话不多说,直接上代码: App.vue <template> <div> <Son

随机推荐