Vue - 视图组件切换的方案
2021-09-13 21:15
751 查看
前言
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>
相关文章推荐
- vue-router组件重用 路由切换时的问题
- vue --- > 获取子组件数据的一个应急方案$refs
- vue的二级路由切换父组件图片不变
- Vue多系统切换实现方案
- Vue-组件4 组件切换
- Vue不同组件之间的切换
- vue中子组件和父组件数据同步方案
- Vue实现内部组件轮播切换效果的示例代码
- 浅谈vue-router路由切换 组件重用挖下的坑
- 动态切换view视图viewflipper组件
- Vue组件的创建方式和切换方式实例理解
- vue-router 地址切换视图不切换
- vue学习笔记:6.2.组件的切换方式
- vue组件开发练习--焦点图切换
- Vue2.0 多 Tab切换组件
- vue、uniapp使用swiper组件自定义左侧菜单栏和切换菜单
- Vue.js-----轻量高效的MVVM框架(十二、组件动态切换)
- 【VUE组件开发】VUE随意点击列表元素切换选中样式,并有序数组添加索引和数值
- 动态切换view视图viewflipper组件
- 使用vue动态组件达到切换效果