您的位置:首页 > Web前端 > Vue.js

Vue - 视图组件切换的方案

2021-09-13 21:15 751 查看

TOC

前言

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 -
梦想是咸鱼
关注一下吧
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: