Vue - 视图组件切换的方案

前言

Vue中切换视图组件的方案大致有三种

1、roure-view 适合大幅度视图切换
2、v-if 适合小幅度组件切换
3、component 动态组件 

roure-view 切换视图组件

这个不多说了，之前的文章记录：Vue - route路由跳转

v-if 切换视图组件

• 这个比较简单，如下：

<CommonOne v-if="true" />
<CommonTwo v-else />

component 切换视图组件

• 效果图

---

• home.vue

<template>
  <component :is="currentComponent" />

  <hr>

  <button @click="onChangeCurrent('CommonOne')">切换到组件一</button>
  <button @click="onChangeCurrent('CommonTwo')">切换到组件二</button>
</template>

<script>
import CommonOne from '@/components/common-one'
import CommonTwo from '@/components/common-two'
import { ref } from 'vue'

const currentComponent = ref('CommonOne')

export default {
  name: 'home',
  components: {
    CommonOne,
    CommonTwo
  },
  data () {
    return {
      currentComponent
    }
  },
  methods: {
    onChangeCurrent (val) {
      currentComponent.value = val
    }
  }
}
</script>

• common-one.vue

<template>
  <div>组件一</div>
</template>

• common-two.vue

<template>
  <div>组件二</div>
</template>

- End - - 个人学习笔记 - - 仅供参考 -