在Vue3中,父组件调用子组件中的方法

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

前言:

最近在写一个项目的过程中,遇到了父组件需要调用子组件中方法的情况,最终找到了实现方法,总结如下:文章来源地址https://www.toymoban.com/news/detail-827915.html

1.在子组件中定义方法并暴露出去

//在popupType组件中
<template>
  <div v-show="show">
   我是蓝宇逸辰
  </div>
  <button @click="crossPopup">X</button>
</template>
<script setup>
import { ref,defineExpose } from 'vue';
let show = ref(false);
const crossPopup = () => {
  show.value = !show.value;
}
defineExpose({
  crossPopup,
});
</script>

2.在父组件中获取子组件并调用子组件中的方法

<template>
  <div>
    <button @click="changeShow">显示</button>
    //2.1
    <PopupType ref="childComp"></PopupType>
  </div>
</template>
<script setup>
import PopupType from '../components/popupType.vue';
import { ref } from 'vue';
//2.2
const childComp = ref(null);
//2.3
const changeShow = () => {
  childComp.value.crossPopup()
}
</script>

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

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

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

相关文章

  • vue3父子组件相互调用方法详解

    在vue3项目开发中,我们常常会遇到父子组件相互调用的场景,下面以setup语法糖格式详细聊聊父子组件那些事儿。

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

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

    2024年02月13日
    浏览(44)
  • vue3父组件使用ref调用子组件方法

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

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

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

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

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

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

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

    2024年02月17日
    浏览(41)
  • Vue3 —— 在vue中动态引入组件以及动态引入js的方法

    文章目录 一 、 动态引入组件 1. 具体写法 二、 动态引入js文件 1. 具体写法 总结 定义一个异步组件,它在运行时是懒加载的。参数可以是一个异步加载函数,或是对加载行为进行更具体定制的一个选项对象。 在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时

    2024年02月12日
    浏览(52)
  • Vue3前端开发,如何获取组件内dom对象以及子组件的属性和方法

    Vue3前端开发,借助Ref来获取组件内dom对象,借助defineExpose编译宏可以获取到子组件的属性和方法。 app入口文件,我们作为父组件,在里面调用了自定义组件TestCom.vue。 先做了一个测试,借助于ref来访问自身的dom对象。如图所示是可以拿到的。 ref又称谓钩子函数,在vue2版本中

    2024年01月22日
    浏览(61)
  • 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日
    浏览(41)
  • 前端技术Html,Css,JavaScript,Vue3

    1.基本标签 2.文本格式化 3.链接 4.图片 5.无序列表 6.有序列表 7.表格 8.表单 1.选择器 2.文本和字体 3.链接 4.隐藏 5.定位position 6.浮动 7.对齐 8.图像 1.输出 2.函数 3.常用事件 4.DOM 5.改变Html 6.DOM 元素 (节点) 尾部创建新的 HTML 元素 (节点) - appendChild() 头部创建新的 HTML 元素 (节点)

    2024年02月13日
    浏览(53)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包