Vue3+Ts子组件调用祖组件方法

最新推荐文章于 2024-06-21 18:59:59 发布
最新推荐文章于 2024-06-21 18:59:59 发布
阅读量1.3k 收藏 5
点赞数 1
分类专栏： 前端 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46627407/article/details/126473702
版权

Vue3+Ts写法子组件调用祖组件方法

在实际开发过程中，当需要子组件调用祖组件中方法时，应该如何使用？
在这里插入图片描述

思路：依赖注入

通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦：
在这里插入图片描述

Vue3官方示例

在这里插入图片描述

Vue3+Ts写法

祖组件：provide
在这里插入图片描述
子组件：inject
在这里插入图片描述

浪漫文艺前端程序猿
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue 子组件调用父组件中的方法
m0_54335296的博客
06-10 238
Vue 子组件调用父组件中的方法 1.通过this.$parent.event调用父组件中定义的方法 子组件 <template> <div id="son"> <h6>子组件</h6> <button @click="childMethod()">$parent方式调用父组件方法</button> </div> </template> <script> export def
在vue3+ts+setup语法糖中使用图片预览组件
09-14
在Vue3中，开发人员可以利用TypeScript(简称ts)的强类型特性和新的`setup`语法糖来构建更加安全和高效的应用。本教程将详细讲解如何在Vue3项目中结合TypeScript和`setup`语法糖实现图片预览功能。 首先，让我们了解...
vue3+ts+vite 动态导入多文件组件
公主范i 的博客
08-10 1451
1、在components文件夹中新建index.ts文件（components文件夹下为创建的组件）2、在vue文件中引入组件。
【vue3】入门系列—子组件调父组件方法
An滴饭儿的博客
04-30 538
vue3子组件调父组件方法
Vue+TS+子组件回调父组件的方法
杨勇博客之家
07-29 1462
历史文章目录连接：https://blog.csdn.net/yy763496668/article/details/113117040此链接为CSDN连接，目的为方便大家一览博客目录！内...
子组件调用父组件方法
05-13 194
<body> <div id="app"> <button>注册</button> <button>登录</button> <com @fun="funparent"></com> //1.自定义方法: fun（在子...
vue3 父组件引用子组件，子组件调用父组件的方法来实现父组件的组件切换
最新发布
TTruYi的博客
06-21 479
vue3 父组件引用子组件，子组件调用父组件的方法来实现父组件的组件切换
Vue3+Vite4+TS 后台模板
06-08
Vue3+Vite4+TS 后台模板是一款基于最新技术栈构建的高效、现代化的前端开发框架，专为后台管理界面设计。该模板利用了Vue.js的最新版本Vue3，搭配快速构建工具Vite4，以及TypeScript的静态类型检查，提供了强大的...
uniapp + vue3 +vite + ts + pinia 框架模板
01-31
标题 "uniapp + vue3 + vite + ts + pinia 框架模板" 提供了我们讨论的关键技术栈。这是一个基于uni-app、Vue.js 3、vite、TypeScript和Pinia的项目模板，用于构建移动端应用。让我们逐一探讨这些技术的特性与它们在...
一个基于vue3+ts开发的商城后台管理系统源码.zip
06-24
1. **Vue3 Composition API**：Vue3 引入了Composition API，这是一种更加灵活的组件化方式，允许开发者在不同的组件之间共享和组合逻辑。在项目中，你可能会看到很多以 `setup()` 函数开头的组件，这是Composition ...
毕业设计基于Vue3.0+Ts的医疗服务平台前端
11-02
【标题】"毕业设计基于Vue3.0+Ts的医疗服务平台前端" 描述了一项针对学生毕业设计的项目，该平台使用了最新的Vue.js版本3.0并结合TypeScript进行开发，专注于创建一个医疗服务平台的前端部分。Vue3.0是Vue.js框架的...
VUE3 祖孙组件传值调用方法
seimeii的博客
08-01 3093
VUE3 祖孙组件传值调用方法
react typescript 子组件调用父组件
weixin_30312659的博客
05-05 835
//父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport "./index.less"import Child from "./compon/list" interface IProps { MakeMoney?: () => void //...
子组件调用父组件中的方法
manTouJiaRou的博客
12-13 322
父组件： &lt;Child onClick = {this.func} /&gt; 子组件： // 父组件中的方法 funcChild = () =&gt; { this.props.onClick(); } render() { return( &lt;div onClick={() =&gt...
父子组件中，子组件调用父组件的方法
weixin_47163986的博客
02-22 1099
父子组件中，子组件调用父组件的方法
Vue3-子组件调用父组件的方法、父组件给子组件传值，defineEmits、defineProps
weixin_45618681的博客
07-21 3386
defineProps 和 defineEmits 都是只能在中使用的编译器宏。他们不需要导入，且会随着的处理过程一同被编译掉。
vue子组件调用父组件中的方法、值的几种方式
高宇辰
08-12 6881
有时候，我们会把方法定义在父组件中，然后在多个子组件中调用父组件的方法，这是很常见的场景。那么，在子组件中调用父组件的方法有哪几种方式呢？
子组件中调用父组件的方法以及父组件调用子组件的方法
weixin_46633789的博客
12-07 2007
一、子组件调用父组件的第一种方法 1、在父组件中定义一个方法 2、在子组件指定的事件中进行调用 二、在父组件中进行监听1、父组件中 2.子组件中
vue3+ts子组件调用父组件的方法
08-25
在 Vue 3 中，子组件可以通过 `emit` 方法调用父组件的方法。这是一种通信方式，允许子组件向父组件发送自定义事件，并且可以在父组件中监听并执行相应的方法。 以下是一个示例代码： 父组件： ```vue <template> <div> <ChildComponent @childMethod="parentMethod" /> </div> </template> <script> import { defineComponent } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default defineComponent({ components: { ChildComponent, }, methods: { parentMethod() { // 在父组件中定义的方法 console.log('Parent method called'); }, }, }); </script> ``` 子组件： ```vue <template> <div> <button @click="callParentMethod">Call Parent Method</button> </div> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ methods: { callParentMethod() { // 在子组件中调用父组件的方法 this.$emit('childMethod'); }, }, }); </script> ``` 在上面的示例中，父组件中使用 `@childMethod` 监听子组件触发的自定义事件，并在 `parentMethod` 方法中处理相应的逻辑。在子组件中，通过 `this.$emit` 触发自定义事件，从而调用了父组件的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值