vue 动态组件

最新推荐文章于 2024-09-25 22:48:08 发布

原创最新推荐文章于 2024-09-25 22:48:08 发布 · 300 阅读

CC 4.0 BY-SA版权

本文介绍如何使用Vue.js中的<component>元素实现组件的动态挂载，通过更改active属性值来切换显示不同的组件实例。示例展示了如何在两个组件之间进行切换，并提供了完整的代码实现。

Vue.js 提供了一个特殊的元素 <component> 用来动态地挂载不同的组件,使用 js 特性来选择要挂载的组件.示例代码如下:
<template>
  <div class="wrap">
    <component :is="active"></component>
    <button @click="switchTap('temp')">切换到temp</button>
    <button @click="switchTap('tempA')">切换到tempA</button>
   </div>
 </template>
<script>
import Temp from '../components/temp'
import TempA from '../components/tempA'
export default {
  name: 'practice',
  components: { Temp, TempA },
  data () {
    return {
      books: [
        { name: 'aaa'},
        { name: 'bbb'},
        { name: 'ccc'}
      ],
      colors: [
        { color: 'red'},
        { color: 'blue'},
        { color: 'yellow'}
      ],
      active: 'Temp'
    }
  },
  methods: {
    switchTap(val) {
      this.active = val
    }
  }
}
</script>

<style scoped>
*{
  list-style: none;
}
</style>

动态地改变 active的值就可以动态挂载了.