Vue中动态渲染组件

在某个组件中包含了多个子组件，随着不同的操作需要渲染对应的某个子组件 比如像下面这样

// A 组件
<template>
  <div>
    <p>我是A组件</p>
  </div>
</template>

// B 组件
<template>
  <div>
    <p>我是B组件</p>
  </div>
</template>

// C 组件
<template>
  <div>
    <p>我是C组件</p>
  </div>
</template>

<template>
  <div id="app">
    <A></A>
    <B></B>
    <C></C>
  </div>
</template>

<script>
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'

export default {
  name: 'App',
  components: {
    A,
    B,
    C
  },
  data() {},
 
}
</script>
</template>

这里只注册了3个子组件来演示，当我们需要来控制组件的显示或者隐藏，并且会有很多个子组件的时候 我们可以使用<component></component>标签 加上 is 属性来实现动态渲染组件

<template>
  <div id="app">
    <!-- <A></A>
    <B></B>
    <C></C> -->
    <component :is='currentDiv'></component>
    <button @click="renderFn('A')">渲染A组件</button>
    <button @click="renderFn('B')">渲染B组件</button>
    <button @click="renderFn('C')">渲染C组件</button>
  </div>
</template>

<script>


import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'

export default {
  name: 'App',
  components: {
    A,
    B,
    C
  },
  data() {
    return {
      currentDiv:'' 
    }
  },
  methods:{
    renderFn(cmp) {
    // :is 这个动态属性的值一定得是正确的组件名 
      this.currentDiv = cmp
    }
  }
}
</script>

<style>

</style>

这样就可以实现动态的渲染组件了。动态渲染组件的好处在于用户的操作只会渲染出对应的组件，而如果使用 v-show 或者v-if 来控制组件的显示或隐藏 则代码结构就显得冗余了。