Vue内置组件component如何使用示例详解？

本文共计941个文字，预计阅读时间需要4分钟。

目录 + component is + 内置组件切换方法一：component is + 内置组件切换方法二：component is + 内置组件切换方法一：component + 组件（独立拿出一个组件来专门进行切换使用） + 使用is来绑定你的组件：

目录

• 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内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！