vue3.0父级组件调用子组件方法

这篇具有很好参考价值的文章主要介绍了vue3.0父级组件调用子组件方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue3.0父级组件调用子组件方法

场景:在页面开发过程中,我经常涉及到不同组件之间的元素和方法的调用。就此记录在vue3.0项目,也是我开发的开源项目中的实现方式。

父级组件调用子级

1.应用场景

以下以我的代码实现为例:在左侧菜单中,通过点击新建会话,在会话列表中新建一个会话框。

其中:会话列表页面是菜单的子级组件。

2.添加组件引用

代码如下:

import List from './List.vue'

3.页面嵌入

代码:

<div class="flex-1 min-h-0 pb-4 overflow-hidden">
    <List ref="ListComp" />
</div>

这里,在 <List> 元素中使用 ref 属性,表示引用一个名为 "ListComp" 的组件或对象

4.使用list中方法(核心)

代码如下

const ListComp = ref<null | any>(null) // 将类型设置为允许为 null

const addConversation = () => {
  ListComp!.value.addConversation('New Chat') // 使用非空断言操作符
}

在父节点调用addConversation方法时,调用ListComp组件的addConversation方法,创建一条为New Chat 的会话。

阅读如遇样式问题,请前往个人博客浏览: https://www.raokun.top

拥抱ChatGPT:https://first.terramours.site

文中代码来自开源项目,地址:https://github.com/TerraMours/TerraMours_Gpt_Api

参考链接:https://www.cnblogs.com/ddqyc/p/16023292.html文章来源地址https://www.toymoban.com/news/detail-739344.html

到了这里,关于vue3.0父级组件调用子组件方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3父组件使用ref调用子组件方法

    在vue2中,父组件通过ref调用子组件的方法只需要给子组件添加ref属性,然后使用this.$refs.XXX.method即可 但是在vue3中,子组件需先使用defineExpose将方法暴露给父组件 调用方法如下: 1、使用getCurrentInstance 2、使用ref函数创建一个响应式的引用,并将其绑定到子组件上

    2024年01月16日
    浏览(47)
  • 在Vue3中,父组件调用子组件中的方法

    前言: 最近在写一个项目的过程中,遇到了父组件需要调用子组件中方法的情况,最终找到了实现方法,总结如下: 1.在子组件中定义方法并暴露出去 2.在父组件中获取子组件并调用子组件中的方法

    2024年02月19日
    浏览(42)
  • vue3.0 父组件调用子组件方法及获取子组件的值

    通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异,但是思路还是一样的这里我详细的讲解一下他的调用方式及获取方法 1.第一步需要我们在父组件中定义一个方法 当我们点击这个方法的时候去调用子组件的方法 代码

    2024年02月14日
    浏览(27)
  • React、Vue3中父组件如何调用子组件内部的方法

    当父组件需要调用子组件的方法时,可以通过useImperativeHandle钩子函数实现。以下例子是ts实现方式。 在子组件中使用 useImperativeHandle 钩子,将指定的方法暴露给父组件,以便父组件可以通过子组件的引用来调用该方法。 在子组件中使用了 useImperativeHandle 钩子将 someMethod 方法

    2024年02月16日
    浏览(35)
  • vue3.0子组件接收父组件的值以及调用父组件的方法

    html: 使用 v-bind即 :xxx=\\\"变量/方法\\\"向子组件传递值或者方法,下面定义变量id和变量setIds,将searchForm.id的值和setIds方法传到子组件中去 js: js: 先通过props进行接收父组件传来的值,然后再在setup里面使用第一个参数props,可以拿到父组件所有的变量以及方法 html:

    2024年02月17日
    浏览(40)
  • vue3 父组件与路由子组件相互调用

    Framework.vue中通过路由出口router-view/,展示了Main.vue组件,但是现在需要在Main.vue组件中去调用Framework.vue组件中的方法,可以有以下几种做法 可以使用provide/inject的机制 Framework.vue Main.vue 可以直接在router-view @kk=“kk”/绑定事件监听 Framework.vue Main.vue 可以使用router-view /的组件写

    2024年02月12日
    浏览(40)
  • VUE中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用

    场景:自定义一个通用组件,需要调用父组件的方法进行计算 一、使用this.$emit()向父组件触发一个事件,父组件监听这个事件即可。 父组件: 子组件: 二、直接在子组件中通过“this.$parent.event”来调用父组件的方法。 父组件: 子组件: 三、父组件把方法传入子组件中,在子

    2024年02月04日
    浏览(39)
  • vue.js兄弟组件方法调用b组件调用a组件方法

    vue.js 中兄弟组件方法调用 场景:父组件中同时引入两个子组件(A和B),此时B组件点击按钮需要调用A组件里面的方法 方案1:vue的事件总线 方案2:自定义事件($emit) 最终方案:方案2 具体操作 B组件上添加一个自定义的事件,这个是B组件传递给父组件的 @getList=getlist A组件

    2024年02月13日
    浏览(42)
  • Vue子组件关闭后调用刷新父组件方法

    实现效果   调用方法 当在子组件里更改了某些信息且关闭子组件后,需要父组件更新修改后的内容,操作如下: 1、$emit触发 2、使用$parent触发父组件 更新数据是由某个方法触发,如getList() 常见问题 在开发 Vue 项目中,遇到了一个这样的问题: 其中UI框架使用的是iview UI , 在

    2024年02月11日
    浏览(40)
  • vue3 销毁组件方法

    问题描述:使用elementplus的dialog,当关闭弹窗后不刷新页面,直接再次打开发现弹窗中还存留上一次的数据。尝试定义关闭事件,或者使用api中提供的属性destroy-on-close 都不行。后来发现这是一个误区。弹窗关闭时并不代表这个组件已经被销毁了,只是dialog关闭了 解决方法:使

    2023年04月19日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包