component组件如何实现页面切换 vue3搭配typescript

已于 2022-04-10 00:23:02 修改
阅读量2k 收藏
点赞数 2
文章标签： typescript vue.js 前端
于 2022-04-10 00:22:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62355341/article/details/124070978
版权

我这边是因为 登录 注册 注册信息完善三个页面背景图一样 所以想到了用component组件去做页面切换。

页面跳转逻辑是 登录跳转到注册 注册跳转到注册信息完善页面

这是我的layout页面 通过layoutPath变量的值改变去达到切换组件的目的

三个子组件通过子传父的方式调用方法clickChange去修改layoutPath的值

这里是很简单

但是用到了vue3+typescript 就不简单了

我先了解了一下vue3中 是通过setup 中的 context属性

context.emit 去做的子传父

小羊羊.
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Typescript 装饰器@Component
kangkang_style的博客
12-04 1566
vue-property-decorator 在 vue-class-component 上增强更多的结合 Vue 特性的装饰器, 对 Vue 组件进行了一层封装，让 Vue 组件语法在结合了 TypeScript 语法更加贴近面向对象编程.并提供一个工具函数一个装饰器: 语法： @Component(options) 说明： options 中需要配置 decorator 库不支持的属性, 如: components, filters, directives等 example: &lt
vue3-component
04-04
10. **Suspense 和 Keep-Alive 结合**：Vue 3 中，Suspense 可以与 Keep-Alive 结合使用，实现异步组件的缓存，从而在切换路由时保持组件状态。 以上是关于 "vue3-component" 演示中的核心知识点。通过学习这些特性...
Vue3与TypeScript的深度结合：技术指南及实践详解
热门推荐
聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
03-01 5万+
详解： Vue 3的Composition API可以更好地与TypeScript集成，提供更准确的类型推断和严格的类型约束。setup() {// 类型化的ref// 类型化的计算属性return {state,increment在这个例子中，我们定义了一个CounterState接口来描述组件的状态模型，并使用此接口约束reactive对象。同时，通过明确指定ref和computed的类型，确保整个应用中的数据流具有严格的数据类型。
Vue3使用动态组件 Component
最新发布
fandan1107的专栏
05-28 1301
component是vue内置组件，主要作用是 动态渲染组件。本文主要介绍vue内置动态组件component的使用。
关于Vue的组件切换【v-if、v-show、template、component】
qq_22841387的博客
04-03 2900
我们知道在Vue中，页面结构是由组件构成的，不同的组件可以表示不同的页面，适合进行单页面（SPA）开发。 接下来，我们演示登录和注册组件的切换 既然Vue是由组件组成的，那很自然的，我们容易想到，如果我们需要切换各个组件呢？ v-if 通过v-if去渲染组件 示例代码如下 <!DOCTYPE html> <html lang='zh_cn'> <head> <meta charset='UTF-8'> <meta http-equiv
使用component实现一个页面间切换
weixin_41905935的博客
04-20 1375
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;&lt;meta http
Vue.js组件(component)的应用---实现点击按钮转换页面的功能
PILIpilipala的博客
11-13 1538
组件的应用组件的内部构成实现点击按钮出现相应的页面 组件的内部构成 组件和Vue实例类似，都有自己的data和methods属性，但是组件中的data和实例的data有点不一样： 实例中的data可以为一个对象，组件中的data除了必须是一个方法之外，该方法内部还必须返回一个对象 <div id="app"> <mycom1/> </div> <script> Vue.component('mycom1',{ template:
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
3. **TypeScript 集成**：Vue3.x 支持 TypeScript，可以在定义组件时声明类型，提供编译时的错误检查。Vue Router 的配置也可以用 TypeScript 进行类型检查，增强代码的可读性和可靠性。 4. **Vue Router 4.x**：...
Vue3 +router
05-18
2. 泛型支持：Vue3提供了TypeScript的泛型支持，使类型推断更加准确，提高了开发时的代码安全性。 3. Suspense 组件：Vue3新增的Suspense组件可以用于挂起渲染，直到异步组件准备就绪。这在处理懒加载或动态导入...
vue的国际化实现，包括ant-design-vue与自定义的实现
04-08
3. **在Vue组件中使用**： 在`App.vue`或者其他组件中，你可以使用`$t`方法来获取翻译。比如： ```html <h1>{{ $t('message.hello') }} ``` 4. **Ant Design Vue的国际化**： Ant Design Vue也提供了...
typescriptvue开发的日历组件使用swiper库来支持日历滑动功能简单易用
08-09
本项目是基于TypeScript和Vue.js开发的一款日历组件，它利用了Swiper库来实现日历的滑动功能，为用户提供流畅的交互体验。 首先，TypeScript是JavaScript的一个超集，它引入了静态类型系统和面向对象的特性，提高了...
基于vue脚手架的路由系统的使用
10-02
在"基于vue脚手架的路由系统的使用"这个主题中，我们将探讨如何使用Vue CLI 3创建项目，并集成Vue Router来实现页面间的导航。Vue Router是Vue.js的官方路由库，它是单页应用（SPA）中必不可少的部分，负责管理不同...
vue_3：gg
02-10
Vue 3对全局API进行了调整，例如`Vue.component()`被`app.component()`取代，`new Vue()`被`createApp()`代替。这些改变是为了提供更清晰的模块化和树形结构。 10. **Fragment和Suspense的生命周期钩子**： Vue 3...
vue面试题30道.zip
07-23
- Vue 3原生支持TypeScript，提供更好的类型检查和开发体验。 29. **Vue CLI的插件系统** - 可以自定义和使用社区提供的CLI插件，加速开发流程。 30. **Vue生态系统中的持续集成（CI/CD）** - 结合Jenkins、...
vue-router.7z
05-06
Vue Router 是 Vue.js 的官方路由库，它允许我们管理应用的导航和页面路由，实现组件化的视图导航，是构建 Vue 应用的重要组成部分。 在给定的“vue-router.7z”压缩包中，包含了一系列文件和目录，它们是Vue项目...
vue25版全家桶webpack38cms项目基础模板框架
08-12
Vue 2.5引入了`<component is>`的写法来动态切换组件，支持异步组件加载，提高了性能，并优化了`v-for`和`v-if`的使用。 2. **Vuex**：Vuex是Vue的状态管理模式，它集中管理应用的所有组件的状态，提供了统一的方式...
Vue3 + Typescript + vue-property-decorator 使用Component异常问题解决
赫尔的一个啥都写博客
02-14 2136
原因 vue-property-decorator 版本不对。 解决方案 "dependencies": { "vue-property-decorator": "^10.0.0-rc.3" } 修改package.json中的vue-property-decorator版本 执行npm install --legacy-peer-deps 然后就不会提示有问题了 吐槽 网上教程都是Component，但是vue-class-component都换成@Options了… ...
vue之组件切换
jiaowolaoliu111的博客
07-15 773
组件切换v-if与v-else，Vue中的页面结构是由不同组件构成的，不同组件可以适合不同页面，适合进行单页应用开发。通过v-if和v-else来判断登录页面。flag的值是布尔类型。当点击登录按钮时则显示登录页面，点击注册按钮时显示注册页面。...
vue 如何实现页面切换
bin_2659017380的博客
04-18 6191
一、确保计算机已经安装了nodejs环境 1）window + r 输入cmd 打开终端 2）在终端中输入命令：node -v 出现：v12.14.0 版本号（v+数字）证明已将安装成功 二、首次安装vue-cli 时需要全局安装脚手架 在终端中输入：npm install vue-cli -g vue init weabpak 项目名 cd 项目名 输入npm install 启动：npm run dev 三、在 APP.vue 组件内定义 <template> <di
vue3 ts怎么在页面中切换两个组件并传值到组件
05-17
你可以使用 Vue3 的 `<component>` 组件来动态切换两个组件，并通过 props 传值给组件。 首先，你需要在页面中定义两个组件： ```typescript // ComponentA.vue <template> <div> <p>Component A</p> <p>{{ message }}</p> </div> </template> <script lang="ts"> import { defineComponent, PropType } from 'vue'; export default defineComponent({ props: { message: { type: String as PropType<string>, required: true, }, }, }); </script> ``` ```typescript // ComponentB.vue <template> <div> <p>Component B</p> <p>{{ count }}</p> </div> </template> <script lang="ts"> import { defineComponent, PropType } from 'vue'; export default defineComponent({ props: { count: { type: Number as PropType<number>, required: true, }, }, }); </script> ``` 然后，你可以在页面中使用 `<component>` 组件来动态切换这两个组件，并通过 props 传值： ```typescript <!-- App.vue --> <template> <div> <component :is="currentComponent" :message="message" :count="count" /> <button @click="switchComponent">Switch Component</button> </div> </template> <script lang="ts"> import { defineComponent, reactive } from 'vue'; import ComponentA from './ComponentA.vue'; import ComponentB from './ComponentB.vue'; export default defineComponent({ components: { ComponentA, ComponentB, }, setup() { const state = reactive({ currentComponent: 'ComponentA', message: 'Hello, World!', count: 0, }); const switchComponent = () => { state.currentComponent = state.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'; state.count++; }; return { ...state, switchComponent, }; }, }); </script> ``` 这里使用了 Vue3 的 Composition API 来定义页面组件，并使用 `reactive` 来定义一个响应式对象来存储组件状态。`switchComponent` 方法用于切换两个组件，并且每次切换都会增加 `count` 的值。在模板中，通过 `:is` 来动态切换组件，同时通过 `:message` 和 `:count` 来传递值给组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值