原文网址：Vue--动态组件(component标签)的用法_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍Vue的动态组件的用法。

在Vue中，可以通过component标签的is属性动态指定标签，例如：

<component :is="componentName"></component>

此时，componentName的值是什么，就会引入什么组件。

官网网址

https://v2.cn.vuejs.org/v2/guide/components.html#动态组件

示例

路由设置

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Parent from '../components/Parent'Vue.use(VueRouter)const routes = [{path: '/',name: 'Parent',component: Parent}
]const router = new VueRouter({routes
})export default router

父组件

components/Parent.vue

<template><div class="outer"><h2>这是父组件</h2><component :is="componentName" :propA="propAValue"></component></div>
</template><script>
import ChildA from './ChildA'
import ChildB from './ChildB'export default {name: 'Parent',components: { ChildA, ChildB },data () {return {componentName: 'ChildB',propAValue: 'aaa'}}
}
</script><style scoped>
.outer {margin: 20px;border: 2px solid red;padding: 20px;
}
</style>

子组件

components/ChildA.vue

<template><div class="outer"><h3>这是ChildA</h3><div>传入进来的propA值为：{{propA}}</div></div>
</template><script>
export default {name: 'ChildA',props: ['propA']
}
</script><style scoped>
.outer {margin: 20px;border: 2px solid blue;padding: 20px;
}
</style>

components/ChildA.vue

<template><div class="outer"><h3>这是ChildB</h3><div>传入进来的propA值为：{{propA}}</div></div>
</template><script>
export default {name: 'ChildB',props: ['propA']
}
</script><style scoped>
.outer {margin: 20px;border: 2px solid blue;padding: 20px;
}
</style>

测试

访问：http://localhost:8080/

Vue--动态组件(component标签)的用法相关推荐

element vue 获取select 的label_Vue动态组件component的深度使用
背景介绍最近在封装一些基于Vue+ElementUI的组件,将一些实际项目中常用的,有一定规律的业务进行抽象总结,开发出相应的Vue组件. 组件封装首先想到的就是Form组件,在Element U ...
vue 动态组件组件复用_真正的动态声明性组件
vue 动态组件组件复用在这篇简短的文章中,我将重点介绍ADF动态声明性组件. 我的意思是一个众所周知的ADF标签af:declarativeComponent . 它可以用作将页面设计为页面片段和 ...
vue 动态组件使用教程
vue 动态组件的使用,下面进行介绍 1.基本使用新建组件 Article.vue <template><div><p>黄州东南三十里为沙湖,亦曰螺师店.予买田其 ...
Vue动态组件异步组件 keep-alive
动态组件指的是动态切换组件的显示与隐藏每次进行组件间的切换时,Vue都创建了一个新的组件实例,同时存在销毁过程为了避免过程一每次进行销毁重建的问题,那么可以通过 keep-alive 来处理 &l ...
vue内置动态组件component使用详解
1 动态组件介绍 component是vue内置组件,主要作用为动态渲染组件,基本用法如下: <!-- 动态组件由 vm 实例的 `componentName` property 控制 --&g ...
vue ---- 动态组件
动态切换组件的显示隐藏 component 如何实现动态组件渲染 vue提供了一个内置的<component>,专门用来实现动态组件的渲染. 这个标签就相当于一个占位符,需要使用is属性指 ...
Vue动态组件、组件缓存、组件激活和非激活、组件插槽、组件name
一.动态组件如何切换2个组件互斥的显示或者隐藏呢除了v-if 什么是动态组件? 多个组件使用同一个挂载点,并动态切换.这就是动态组件完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, ...
三十七、深入Vue.js组件Component（下篇）
@Author:Runsen @Date:2020/7/4 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
三十六、深入Vue.js组件Component（上篇）
@Author:Runsen @Date:2020/6/15 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...

Vue--动态组件(component标签)的用法

简介

示例

路由设置

父组件

子组件

测试

Vue--动态组件(component标签)的用法相关推荐

最新文章

热门文章