1.组件动态化

<template><div><button @click="handleChangeComp">切换</button><component :is="currentTabComponent"></component></div>
</template><script>import pageA from './components/pageA'import pageB from './components/pageB'import pageC from './components/pageC'export default {components:{pageA,pageB,pageC},data() {return {currentTabComponent: 'pageA',componentList: ['pageA','pageB','pageC'],index: 0}},methods: {handleChangeComp() {return this.componentList[this.index]}}}
</script>

2.组件保持缓存

<keep-alive><component v-bind:is="currentTabComponent"></component>
</keep-alive>

3.标签动态化

<template><component :is="type" v-bind="linkProps(to)"><slot /></component>
</template><script>
// 检验格式的方法
import { isExternal } from '@/utils/validate'export default {props: {to: {type: String,required: true}},computed: {isExternal() {return isExternal(this.to)},// 返回不同的标签type() {if (this.isExternal) {return 'a'}return 'router-link'}},methods: {// 绑定标签的属性，根据检验的不同返回不同的标签再绑定各自的属性linkProps(to) {if (this.isExternal) {return {href: to,target: '_blank',rel: 'noopener'}}return {to: to}}}
}
</script>

4.component绑定标签和组件的优先级

标签的优先级高于组件的优先级，在自定义组件中，避免重名标签

component动态组件相关推荐

vue component动态组件_vue-component组件
compontent组件名称如何定义? Vue.component('name', { /* ... */ }) 第一个参数就是"name'"组件的名字. 如果我们想在HTML中写 ...
vue2.0中组建里面套用组件_vue19 组建 Vue.extend component、组件模版、动态组件的实例代码...
具体代码如下所示: document var aaa=vue.extend({//继承出来一个vue类aaa template:' 我是标题3 ' }); var a=new aaa();//a跟vm ...
Vue2.x动态组件的使用实现组件整合大屏展示
Vue2.x动态组件的使用实现组件整合大屏展示一.问题项目中开发多个可视化的页面(组件),现需要根据选择的数据和屏幕的配置数据将多个页面整合在同一个页面内,并且根据配置数据划分占比以及位置关系(横 ...
element vue 获取select 的label_Vue动态组件component的深度使用
背景介绍最近在封装一些基于Vue+ElementUI的组件,将一些实际项目中常用的,有一定规律的业务进行抽象总结,开发出相应的Vue组件. 组件封装首先想到的就是Form组件,在Element U ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
vue内置动态组件component使用详解
1 动态组件介绍 component是vue内置组件,主要作用为动态渲染组件,基本用法如下: <!-- 动态组件由 vm 实例的 `componentName` property 控制 --&g ...
[译] 关于 Angular 动态组件你需要知道的
原文链接:Here is what you need to know about dynamic components in Angular 本文主要解释如何在 Angular 中动态创建组件(注:在 ...
详解vue组件的is特性：限制元素动态组件
在vue.js组件教程的一开始提及到了is特性意思就是有些元素,比如 ul 里面只能直接包含 li元素,像这样: <ul><li></li> </ul> ...
Vue_(组件通讯)动态组件结合keep-alive
keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...

component动态组件

1.组件动态化

2.组件保持缓存

3.标签动态化

4.component绑定标签和组件的优先级

component动态组件相关推荐

最新文章

热门文章