vue 动态组件用于实现在指定位置上，动态加载不同的组件，核心代码为：
<component :is="componentTag"></component>
data() { return { componentTag: '', } },
componentTag 为自定义的变量，将需要加载的组件名赋值给它，即可在<component />标签出现的位置，渲染该组件。
使用场景：适用于组件会动态变化的场景，如新闻类型可能是视频、图片、文字，在遍历渲染新闻列表时，根据新闻类型的不同，渲染不同的组件。
完整范例代码
<template> <div style="padding: 30px"> <button @click="change('1')">组件1</button> <button @click="change('2')">组件2</button> <button @click="change('3')">组件3</button> <component :is="componentTag"></component> </div> </template> <script> import component1 from './component1' import component2 from './component2' import component3 from './component3' export default { components: {component1, component2, component3}, data() { return { componentTag: '', } }, methods: { change(index) { this.componentTag = 'component' + index }, } } </script> <style scoped> </style>
src/page/component1.vue
<template> <div> <h3>组件1—文字</h3> <span>我爱你，中国！</span> </div> </template> <script> export default { name: "component1" } </script> <style scoped> </style>
src/page/component2.vue
<template> <div> <h3>组件2-图片</h3> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=30492579,3830400887&fm=26&gp=0.jpg" alt=""> </div> </template> <script> export default { name: "component2" } </script> <style scoped> </style>
src/page/component3.vue
<template> <div> <h3>组件3—输入框</h3> <input type="text"> </div> </template> <script> export default { name: "component3" } </script> <style scoped> </style>
范例效果
- 点击按钮组件1
- 点击按钮组件2
- 点击按钮组件3
特别用法：定义样式
当 componentTag 的值为 style 时，可用于定义样式，不过此种方式并不值得推荐，因为没有scoped约束，容易造成样式污染，但可用于动态定义全局样式（详见博文）。
<template> <div> <component :is="componentTag"> .redText{ color:red } </component> <span class="redText">红色的文字</span> </div> </template> <script> export default { data() { return { componentTag: 'style', } }, } </script> <style scoped> </style>
