vue3+TS使用component 组件的实例

目录

一.项目中实际使用

1.代码使用

二.元素

1.使用方式:

2.代码解释


一.项目中实际使用

1.代码使用

之前,我们使用过,在login相关的几个页面使用component 实现登录/注册/找回密码等页面的动态切换,在天转到这个页面时,传递一个参数,根据参数去显示不同的页面,(当然,你也可以选择将这些页面都加入到路由里,然后设置不同的跳转路径也是可以的)

javascript 复制代码
<template>
  <div class="loginCenter">
    <div class="left">
      <ImageShow></ImageShow>
    </div>

    <div class="right">
      <component :is="componentToShow"></component>
    </div>

  </div>
</template>

<script setup lang="ts">
import ImageShow from "./components/imageShow.vue"
import Login from "./components/login.vue"
import Register from "./components/register.vue"
import FindPasswaod from "./components/findPasswaod.vue"
import { useRoute } from "vue-router";
import {  ref, watch } from "vue";

const judgePath = (path: any) => {
  if (path === 'login') {
    return Login
  } else if (path === 'register') {
    return Register
  } else if (path === 'findPassword') {
    return FindPasswaod
  }
}

const route = useRoute()
const componentToShow = ref(judgePath(route.query.path)) // 使用 ref 进行响应式声明
watch(
  () => route.query.path,
  (newPath: any, old: any) => {
    // 当 route.query.path 发生变化时触发
    componentToShow.value = judgePath(newPath)
  }
);


</script>

二.<component>元素

1.使用方式:

<component> 是Vue.js提供的一个特殊元素,它允许你根据变量或表达式的值来动态渲染不同的组件。

javascript 复制代码
<component :is="componentToShow"></component>

:is 属性:通过 :is 属性绑定一个变量,这个变量的值将决定要渲染的组件。

2.代码解释

在上述的代码中,componentToShow 是一个响应式变量,它的值由路由参数 route.query.path 决定。通过这种设置,你可以动态地选择要渲染的组件。

javascript 复制代码
const componentToShow = ref(judgePath(route.query.path)) // 使用 ref 进行响应式声明

watch(
  () => route.query.path,
  (newPath: any, old: any) => {
    // 当 route.query.path 发生变化时触发
    componentToShow.value = judgePath(newPath)
  }
);
  • ref: 使用 ref 创建一个响应式变量,确保当 componentToShow 的值改变时,视图能够及时更新。
  • watch: 监听 route.query.path 的变化,一旦路径发生变化,执行回调函数,将新的组件赋给 componentToShow,触发动态组件的重新加载。

通过这种方式,可以根据路由参数动态地切换和加载不同的组件,使应用更具有灵活性和可扩展性。这对于处理不同页面或用户操作需要显示不同内容的情况非常有用。

相关推荐
君蓦3 小时前
Flutter 本地存储与数据库的使用和优化
flutter
problc12 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
lqj_本人21 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人1 天前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
起司锅仔1 天前
Flutter启动流程(2)
flutter
hello world smile1 天前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
lqj_本人1 天前
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
flutter·harmonyos
iFlyCai1 天前
极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果
flutter
lqj_本人1 天前
Flutter&鸿蒙next 中使用 MobX 进行状态管理
flutter·华为·harmonyos